用于复杂的两列布局(文本和图像)的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

显示: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>

​

这里是用IE11 https://jsbin.com/lemonopica/1/edit?html,css,output制作的jsbin。

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