Мобильная версияbody { маржа: 0; заполнение: 0; семейство шрифтов: Arial, без засечек; /* Настройте шрифт по мере необходимости */ переполнение: скрыто; /* Скрыть содержимое переполнения за пределами области просмотра */ } .контейнер { дисплей: сетка; столбцы-шаблона сетки: авто 2px авто; /* Три столбца: левое изображение, разделитель, правый текст */ высота: 100вх; } .image-контейнер { столбец сетки: 1; дисплей: гибкий; выровнять-элементы: гибкий старт; /* Выравниваем изображение по верху */ оправдание-содержание: гибкий старт; переполнение: скрыто; /* Скрыть содержимое переполнения за пределами области просмотра */ } изображение { максимальная ширина: 100%; высота: авто; дисплей: блок; } .text-контейнер { сетка-столбец: 3; дисплей: гибкий; гибкое направление: столбец; оправдание-содержание: гибкий старт; /* Выравниваем текст по верху */ выровнять-элементы: по центру; /* Центрируем горизонтально внутри текстового контейнера */ } .делитель { ширина: 100%; высота: 2 пикселя; /* Устанавливаем высоту горизонтального разделителя */ цвет фона: #333; поле: 20 пикселей 0; /* Добавляем запас для пробелов */ } .Заголовок, .Нижний текст { выравнивание текста: по центру; отступ: 20 пикселей; цвет фона: #f0f0f0; /* Устанавливаем цвет фона для текстовых областей */
ТЕКСТ ЗДЕСЬ НИЖНИЙ ТЕКСТ ЗДЕСЬ
Проблема, с которой я столкнулся, заключается в том, что я хочу, чтобы разделитель всегда оставался в середине изображения, а поле ВЕРХНЕГО ТЕКСТА всегда начиналось с выравнивания по верхней части изображения и доходило до разделителя. Таким образом, создается 3 своего рода панели.
Что я не понимаю?
Я думаю, что есть контейнер, в котором все это хранится, затем контейнер для верхней текстовой области, нижней текстовой области и изображения. Изображение и разделитель работают так, как и ожидалось, я думаю, то же самое и с нижним текстом, но верхний текст, кажется, всегда занимает нижнее положение по умолчанию, и я не знаю, почему.
