CSS 用于复杂的两列布局（文本和图像）

Question

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

要求：

列中的内容是根据数据库中的数据动态生成的（因此列的高度是动态的）
列的宽度和高度必须相等（高度取决于内容）
列中的内容必须水平和垂直对齐
布局必须是响应式的，因此当屏幕尺寸改变时，列和内容必须相应地调整大小，而不会丢失图像的比例和布局。在移动屏幕中，第二列低于第一列（列宽为屏幕的 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，它也允许垂直居中，每个浏览器都理解。这是一个 table/table-cell 演示 https://jsbin.com/gecokurebe/1/edit?html,css,output

CSS 用于复杂的两列布局（文本和图像）

CSS for sophisticated two columns layout (text and images)

html

css

frontend

responsive-design