Блок пользователя
Регистрация на нашем сайте позволит вам общаться на форумах и получить доступ к другому полезному функционалу
Вы вошли как Гость

Автор Сообщение
Kabak
Аватар

Участник
Сообщения: 37

Вопрос по вёрстке
  • #1
  • 11.12.2023 15:35

Как внутри родительского блока , в одной строке, разместить один блок текста справа, а второй блок текста точно посередине родительского блока ?

Например, дата справа блока и посередине блока , например,  название страницы.  Как такое организовать на CSS ?

Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Вопрос по вёрстке

А какие ширины должны быть у блоков? Если использовать Бутстрап, то все просто.

Отредактировано: admin (11.12.2023 15:51, 4 месяца назад)
Поблагодарили
Kabak
Аватар

Участник
Сообщения: 37

Re: Вопрос по вёрстке
  • #3
  • 11.12.2023 15:52

резиновое  хотелось бы 

Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Вопрос по вёрстке

Там проценты -- как учили) Для наглядности я адаптивности не добавлял.

Поблагодарили
Kabak
Аватар

Участник
Сообщения: 37

Re: Вопрос по вёрстке
  • #5
  • 11.12.2023 15:56

Должно всегда выглядеть так :

Чтобы дата всегда была слева , а название не зависимо от размера в центре и всё это в одной строке 

Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Вопрос по вёрстке
  • #6
  • 11.12.2023 15:56

Ну так оно и есть. Смотри пример по ссылке.

Поблагодарили
Kabak
Аватар

Участник
Сообщения: 37

Re: Вопрос по вёрстке
  • #7
  • 11.12.2023 15:59

Всё, я тупил.  для блока с названием темы нужно установить шинину в 50% 

Благодарю

Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Вопрос по вёрстке

Можно через абсолютное позиционирование. Минут за 15 с десяток вариантов получится)

Поблагодарили
Kabak
Аватар

Участник
Сообщения: 37

Re: Вопрос по вёрстке
  • #9
  • 11.12.2023 17:19
#132 admin:

Можно через абсолютное позиционирование. Минут за 15 с десяток вариантов получится)

и 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, 4 месяца назад)
Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Вопрос по вёрстке
  • #10
  • 12.12.2023 09:19

Надо четко объяснять как это должно работать. Сама по себе задача "один блок по центру, второй справа" примитивная.

"А втыкать что-то" надо вне родителя. Иначе ты нарушаешь условия задания.

Про маленькие разрешениям: если места не хватает, его и не будет хватать. Либо в столбик, либо скрывай, либо отсекай часть. Таков путь. Так работает адаптивная верстка.

Добавлено 4 минуты спустя:

#134 Kabak:

Вот так вот работает

     <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;
}

А зачем ты родителю назначаешь 100% ширину и отрицательные поля? Зачем ему флекс если один потомок блочный на всю ширину, а второй имеет абсолютное позиционирование? Почему у родителя в таком случае отсутствует position: relative???

Отредактировано: admin (12.12.2023 09:39, 4 месяца назад)
Поблагодарили
Kabak
Аватар

Участник
Сообщения: 37

Re: Вопрос по вёрстке
  • #11
  • 12.12.2023 09:49

Да, флекс там не нужен.  Я проверяю на движке и возможно какие-то свойства у меня наследуются и не прописаны для элементов явно.

Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Вопрос по вёрстке
  1. Если ты используешь абсолютное позиционирование, то элемент, относительно которого оно используется, должен иметь position: relative
  2. 100% ширина и явно указанные margins, особенно отрицательные, плохо сочетаются
  3. Четко сформулируй вопрос чтобы получился пример, работающий на всех разрешениях

Из того, что понял я, вот адаптивный вариант на флексе с "втыканиями". Из творчества -- только уменьшенный шрифт для блока с датой на "смартфонном" разрешении.

А вот вариант с абсолютным позиционированием. Не втыкалось (или втыкалось) у тебя именно из-за отсутствия position: relative у родителя.

Отредактировано: admin (12.12.2023 10:33, 4 месяца назад)
Поблагодарили