html - 如何使内容垂直流动

Question

我正在创建一个动态站点，其中有一个父 div 和子 div（它们的宽度是可变的）在父级内部并试图做到这一点：当创建一个新的 div 时，它被向下推，直到它的父级高度被填充然后开始一个新列，例如：

图片：

 <style>
    .parent {
      height: 800px;
      width: 100%;
      overflow-y: hidden;
      border: 1px solid black;
    }
    .child1 {
      background-color: blue;
      height: 150px;
      width: 150px;
    }
    .child1 {
      background-color: red;
      height: 150px;
      width: 300px;
    }
    </style>

    <div class="parent">
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
    </div>

标签： htmlcss

Answer 1

CSSdisplay: grid是附件图像中描述的布局的解决方案：

.parent {
    height: 800px;
    width: 100%;
    border: 1px solid black;
    display: grid;
    grid-gap: 2px;
    grid-auto-columns: 150px;
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
    color: white;
}
.child1 {
    background-color: blue;
}
.child2 {
    background-color: red;
    grid-column: span 2;
}

网格：

display: grid;在容器上启用网格布局。
grid-gap: 2px;指定网格中的行和列之间的间距为 2px。
grid-auto-columns: 150px;网格中的列应为 150 像素宽。
grid-template-rows: repeat(4, 1fr);网格将包含 4 行等于高度。
grid-auto-flow: column;当内容到达容器底部时，将创建一个新列。

网格元素：

如果没有任何额外的 css，蓝色元素将各自占据网格中 1 行高和 1 列宽的单元格。

.child2 {
    background-color: red;
    grid-column: span 2;
}

红色元素将跨越 2 列。

在这里工作小提琴