Я пытался написать CSS для адаптивного расположения двух столбцов (текст и изображения), но мне тяжело с этим. Макет выглядит следующим образом: макет из двух столбцов
Требования:
- Содержимое в столбцах генерируется динамически на основе данных из базы данных (поэтому высота столбцов is dynamici c)
- Столбцы должны иметь одинаковую ширину и высоту (высота зависит от содержимого)
- Содержимое внутри столбцов должно быть выровнено по горизонтали и вертикали
- Макет должен быть адаптивным Таким образом, при изменении размера экрана столбцы и содержимое должны соответствующим образом изменять размер без потери соотношения и компоновки изображений. На экране мобильного устройства второй столбец располагается ниже первого (ширина столбца составляет 90% экрана)
- Положение содержимого в макете может измениться, поэтому текст может находиться в правом столбце, а изображения в левом столбце. (настроено в CMS). Такое изменение вообще не должно влиять на макет
- На странице может быть больше похожих разделов, поэтому расстояние между ними не должно быть слишком большим, и содержимое одного раздела не может охватывать любой другой раздел
- Он должен отображаться правильно на IE11
Я играл с ним некоторое время, и он, кажется, не работает правильно для меня. Я пытался играть с позиции абсолютной и относительной. К сожалению, проблема всегда с изображениями. Когда я меняю размер экрана, два меньших изображения не занимают исходное положение (они перемещаются влево или вправо). Я не уверен, хорош ли мой подход или нет, я даже не знаю, возможно ли что-то подобное в CSS (ну, я мог бы написать много правил мультимедиа для экранов разных размеров, но я ищу более подходящие решения ), Я никогда не видел этот макет изображений раньше. Мне бы очень хотелось узнать, каков наилучший подход.
Я создал фрагмент кода, чтобы продемонстрировать проблему:
.section {
margin: 0;
display: block;
width: 100%;
height: auto;
padding: 0;
text-align: center;
}
.content-left {
position: relative;
display: inline-block;
width: 45%;
vertical-align: middle;
text-align: center;
float: left;
}
.content-right {
position: relative;
display: inline-block;
width: 45%;
vertical-align: middle;
text-align: center;
float: right;
}
.first-image-wrapper {
position: relative;
z-index: 1;
height: 10rem;
width: 10rem;
text-align: center;
margin: auto;
vertical-align: middle;
right: -2rem;
top: 7rem;
}
.content-image-1 {
vertical-align: middle;
border-radius: 0.2rem;
width: inherit;
height: inherit;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.second-image-wrapper {
position: relative;
right: -1rem;
bottom: 7rem;
border-radius: 0.2rem;
height: 8.4rem;
width: 8.4rem;
z-index: 4;
}
.content-image-2 {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle;
}
.third-image-wrapper {
position: relative;
bottom: 18rem;
right: -10rem;
border-radius: 0.2rem;
height: 5rem;
width: 5rem;
background-size: cover;
z-index: 5;
}
.content-image-3 {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: middle;
}
@media (max-width: 500px) {
.content-left, .content-right {
width: 100%;
display: block;
}
}
<div class="section">
<div class="content-left">
<div class="content-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa
</p>
</div>
</div>
<div class="content-right">
<div class="first-image-wrapper">
<img class="content-image-1" src="https://i.postimg.cc/BtB3G5dz/P1000003.jpg" alt="Image 1">
</div>
<div class="second-image-wrapper">
<img class="content-image-2 " src="https://i.postimg.cc/SnJb8BJ0/P1000064.jpg" alt="Image 2">
</div>
<div class="third-image-wrapper">
<img class="content-image-3" src="https://i.postimg.cc/ykfzD16X/P1000071.jpg" alt="Image 3">
</div>
</div>
</div>
Буду признателен за любую помощь.