Вопрос по вёрстке
Главная / Форумы / Форумы сообщества / Темы оформления / Вопрос по вёрсткеРазмещение и центрирование блоков
Автор | Сообщение |
---|---|
Kabak Участник | Вопрос по вёрстке
Как внутри родительского блока , в одной строке, разместить один блок текста справа, а второй блок текста точно посередине родительского блока ? Например, дата справа блока и посередине блока , например, название страницы. Как такое организовать на CSS ? |
Благодарности отсутствуют | |
admin Администратор | Re: Вопрос по вёрстке А какие ширины должны быть у блоков? Если использовать Бутстрап, то все просто. Отредактировано: admin (11.12.2023 15:51, 10 месяцев назад) |
Поблагодарили: 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, 10 месяцев назад) |
Благодарности отсутствуют | |
admin Администратор | Re: Вопрос по вёрстке
Надо четко объяснять как это должно работать. Сама по себе задача "один блок по центру, второй справа" примитивная. "А втыкать что-то" надо вне родителя. Иначе ты нарушаешь условия задания. Про маленькие разрешениям: если места не хватает, его и не будет хватать. Либо в столбик, либо скрывай, либо отсекай часть. Добавлено 4 минуты спустя: #134 Kabak: А зачем ты родителю назначаешь 100% ширину и отрицательные поля? Зачем ему флекс если один потомок блочный на всю ширину, а второй имеет абсолютное позиционирование? Почему у родителя в таком случае отсутствует position: relative??? Отредактировано: admin (12.12.2023 09:39, 10 месяцев назад) |
Благодарности отсутствуют | |
Kabak Участник | Re: Вопрос по вёрстке
Да, флекс там не нужен. Я проверяю на движке и возможно какие-то свойства у меня наследуются и не прописаны для элементов явно. |
Благодарности отсутствуют | |
admin Администратор | Re: Вопрос по вёрстке
Из того, что понял я, вот адаптивный вариант на флексе с "втыканиями". Из творчества -- только уменьшенный шрифт для блока с датой на "смартфонном" разрешении. А вот вариант с абсолютным позиционированием. Не втыкалось (или втыкалось) у тебя именно из-за отсутствия position: relative у родителя. Отредактировано: admin (12.12.2023 10:33, 10 месяцев назад) |
Поблагодарили: 1 |