如何在 HTML 和 CSS 中设置交替的 div？

Question

我正在建立一个网站，其中有一个垂直交替的图像库。

归根结底，我尝试的是为 div （实际网站中的图像）设置硬编码宽度，然后使用位置来定位 div 的右列。然后添加第三个 div，该 div 应该位于左列中，位于右列中 div 的高度之后。

.large-container {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
}
.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
  position:absolute;
  top: 100px;
  left: 200px;
  
}

<div style="position:relative;">
  <div class="large-container">
    This is an outer container
  </div>
  <div class="small-container">
    This has been the small one
  </div>
  <div class="large-container">
    This is an outer container
  </div>
</div>

这是预期的结果： 预期结果 这是当前的结果： 当前结果 正如您所看到的，左列中的第二个 div 位于第一个 div 的正下方。我希望它位于右侧 div 的高度之后。

Answer 1

您可以使用css grid，这将使其更加动态，并且您可以根据需要添加任何容器。

.grid {
  display: inline-grid;
  grid-template-areas: "l1 ." ". s1" "l2 .";
}

.large-container {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
}

.small-container {
  width: 150px;
  height: 50px;
  background-color: red;
  top: 100px;
  left: 200px;
}

.l1 {
  grid-area: l1;
}

.l2 {
  grid-area: l2;
}

.s1 {
  grid-area: s1;
}

<div class="grid">
  <div class="large-container l1">
    This is an outer container
  </div>
  <div class="small-container s1">
    This has been the small one
  </div>
  <div class="large-container l2">
    This is an outer container
  </div>
</div>

您可以在此处阅读有关 css 网格的更多信息