Вопрос по вёрстке
Главная / Форумы / Форумы сообщества / Темы оформления / Вопрос по вёрсткеРазмещение и центрирование блоков
| Автор | Сообщение |
|---|---|
Kabak
Участник |
Вопрос по вёрстке
Как внутри родительского блока , в одной строке, разместить один блок текста справа, а второй блок текста точно посередине родительского блока ? Например, дата справа блока и посередине блока , например, название страницы. Как такое организовать на CSS ? |
| Благодарности отсутствуют | |
admin
Администратор |
Re: Вопрос по вёрстке
А какие ширины должны быть у блоков? Если использовать Бутстрап, то все просто. Отредактировано: admin (11.12.2023 15:51, 1 год назад)
|
| Поблагодарили: 1 | |
|
Kabak
Участник |
Re: Вопрос по вёрстке
резиновое хотелось бы |
| Благодарности отсутствуют | |
|
admin
Администратор |
Re: Вопрос по вёрстке
Там проценты -- как учили) Для наглядности я адаптивности не добавлял. |
| Поблагодарили: 1 | |
|
Kabak
Участник |
Re: Вопрос по вёрстке
Должно всегда выглядеть так :
Чтобы дата всегда была слева , а название не зависимо от размера в центре и всё это в одной строке |
| Благодарности отсутствуют | |
|
admin
Администратор |
Re: Вопрос по вёрстке
Ну так оно и есть. Смотри пример по ссылке. |
| Благодарности отсутствуют | |
|
Kabak
Участник |
Re: Вопрос по вёрстке
Всё, я тупил. для блока с названием темы нужно установить шинину в 50% |
| Благодарности отсутствуют | |
|
admin
Администратор |
Re: Вопрос по вёрстке
Можно через абсолютное позиционирование. Минут за 15 с десяток вариантов получится) |
| Поблагодарили: 1 | |
|
Kabak
Участник |
Re: Вопрос по вёрстке
#132 admin: и 50% ерунлда и так тоже ерунда. Воткни что нибудь перед родительским блоком и Блок1 уедет вникуда. Оно как-бы на месте, потому что эта строка в самом верху экрана.
Для второго блока нужно разместить его посередине роджительского блока как-будто 1-го блока нет. Добавлено 18 минут спустя: Вот так вот работает
<div class="header_left_middle">
<span class="span_left">{PAGE_ROW_DATE_STAMP|cot_date('date_full', $this)}</span>
<div class="middle_title"><a href="{PAGE_ROW_URL}">{PAGE_ROW_SHORTTITLE}</a></div>
</div>
.header_left_middle {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
font-size: small;
display: flex;
width: 100%;
.span_left
{
position: absolute!important;
width: auto !important;
}
.middle_title
{
text-align: center;
}
Добавлено 8 секунд спустя: Но, при меленьких разрешениях экрана блок наезжает на блок. Нужно чтобы всё-таки блоки не наслаивались.
Пока вопрос открытый... Отредактировано: Kabak (11.12.2023 19:22, 1 год назад)
|
| Благодарности отсутствуют | |
|
admin
Администратор |
Re: Вопрос по вёрстке
Надо четко объяснять как это должно работать. Сама по себе задача "один блок по центру, второй справа" примитивная. "А втыкать что-то" надо вне родителя. Иначе ты нарушаешь условия задания. Про маленькие разрешениям: если места не хватает, его и не будет хватать. Либо в столбик, либо скрывай, либо отсекай часть. Добавлено 4 минуты спустя: #134 Kabak: А зачем ты родителю назначаешь 100% ширину и отрицательные поля? Зачем ему флекс если один потомок блочный на всю ширину, а второй имеет абсолютное позиционирование? Почему у родителя в таком случае отсутствует position: relative??? Отредактировано: admin (12.12.2023 09:39, 1 год назад)
|
| Благодарности отсутствуют | |
|
Kabak
Участник |
Re: Вопрос по вёрстке
Да, флекс там не нужен. Я проверяю на движке и возможно какие-то свойства у меня наследуются и не прописаны для элементов явно. |
| Благодарности отсутствуют | |
|
admin
Администратор |
Re: Вопрос по вёрстке
Из того, что понял я, вот адаптивный вариант на флексе с "втыканиями". Из творчества -- только уменьшенный шрифт для блока с датой на "смартфонном" разрешении. А вот вариант с абсолютным позиционированием. Не втыкалось (или втыкалось) у тебя именно из-за отсутствия position: relative у родителя. Отредактировано: admin (12.12.2023 10:33, 1 год назад)
|
| Поблагодарили: 1 |
