用于复杂两列布局(文本和图像)的 CSS

Question

我一直在尝试为响应式两列布局(文本和图像(编写CSS，但我很难做到这一点。布局如下所示： 两列布局

要求：

列

• 内的内容是根据数据库中的数据动态生成的(因此列的高度是动态的(
• 列的宽度和高度必须相等(高度取决于内容(
• 列内的内容必须水平和垂直对齐
布局
• 必须是响应式的，因此当屏幕大小更改时，列和内容必须相应地调整大小，而不会丢失图像的比例和布局。在移动屏幕中，第二列位于第一列下方(列的宽度为屏幕的 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>

任何帮助将不胜感激。

Answer 1

display：flex 适用于正版 IE11(我运行一个(：

你可以做：

.section {
align-items: center;
display: flex;
width: 100%;
}
.section>div {
width: 50%;
}
.content-right {
margin: auto;
}
img {
display: block;
margin: auto;
}
img:nth-child(1) {
width: 20%;
margin-left: 70%;
margin-bottom: -2rem;
}
img:nth-child(2) {
width: 45%;
margin-left: 10%;
position:relative;
}
img:nth-child(3) {
width: 50%;
margin: -2rem 0 0 40%;
;
}
@media (max-width: 500px) {
.section {
display: block;
}
.section>div {
width: auto;
}
}

<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">
<img class="content-image-1" src="https://i.postimg.cc/BtB3G5dz/P1000003.jpg" alt="Image 1">
<img class="content-image-2 " src="https://i.postimg.cc/SnJb8BJ0/P1000064.jpg" alt="Image 2">
<img class="content-image-3" src="https://i.postimg.cc/ykfzD16X/P1000071.jpg" alt="Image 3">
</div>
</div>

这是一个有效的JSBIN，是在IE11中制作的 https://jsbin.com/lemonopica/1/edit?html,css,output

如果你不用flex填充，你可以使用display：table和display：table-cell，它也允许垂直居中，每个浏览器都可以理解。 这是一个表格/表格单元格演示 https://jsbin.com/gecokurebe/1/edit?html,css,output