html - 3列布局的结构

Question

我想用 CSS 制作三列布局。列元素是否有可能以任意顺序流动，我只将它们“分配”给给定的列，或者它们是否必须结构化以便它们首先填充第一列，然后是第二列和第三列？这些元素具有相同的宽度，但高度不同。此外，每个列的元素数量可能大不相同。例如:

(1) 对于一个结构:

container:
#1 div .red
#2 div .green
#3 div .green
#4 div .blue
#5 div .red
#6 div .green
#7 div .blue

是否可以使用 CSS 对其进行样式设置，使其分为三列，例如:

.red       .green     .blue
+--------+ +--------+ +--------+
|#1      | |#2      | |#4      |
|        | +--------+ |        |
+--------+ +--------+ |        |
+--------+ |#3      | |        |
|#5      | |        | +--------+
|        | +--------+ +--------+
|        | +--------+ |#7      |
|        | |#6      | +--------+
+--------+ |        |
           |        |
           +--------+

(2) 还是必须像这样构造:

container:
#1 div .red
#2 div .red
#3 div .green
#4 div .green
#5 div .green
#6 div .blue
#7 div .blue

对于:

.red       .green     .blue
+--------+ +--------+ +--------+
|#1      | |#3      | |#6      |
|        | +--------+ |        |
+--------+ +--------+ |        |
+--------+ |#4      | |        |
|#2      | |        | +--------+
|        | +--------+ +--------+
|        | +--------+ |#7      |
|        | |#5      | +--------+
+--------+ |        |
           |        |
           +--------+

(3) 或者甚至:

container for .red:
#1 div .red
#2 div .red
container for .green:
#3 div .green
#4 div .green
#5 div .green
container for .blue:
#6 div .blue
#7 div .blue

对于:

.red           .green         .blue
+------------+ +------------+ +------------+
| +--------+ | | +--------+ | | +--------+ |
| |#1      | | | |#3      | | | |#6      | |
| |        | | | +--------+ | | |        | |
| +--------+ | | +--------+ | | |        | |
| +--------+ | | |#4      | | | |        | |
| |#2      | | | |        | | | +--------+ |
| |        | | | +--------+ | | +--------+ |
| |        | | | +--------+ | | |#7      | |
| |        | | | |#5      | | | +--------+ |
| +--------+ | | |        | | |            |
|            | | |        | | |            |
|            | | +--------+ | |            |
+------------+ +------------+ +------------+

如果可能的话，第一个 (1) 案例的 CSS 会是什么样子？

Answer 1

如果能给容器一个确定的高度，可以用flex-box解决，给类设置顺序，加上伪元素充当“breaker”强制换行:

那些伪装在生产中是不可见的；为了演示目的，我将其中一个设置为可见

.container {
  width: 500px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: solid 1px red;
  height: 500px;
}

.container div {
  width: 28%;
  margin: 10px;
}

.container div:nth-child(odd) {
  height: 130px;
}

.container div:nth-child(even) {
  height: 80px;
}

.container:before {
  content: "";
  width: 6px;
  /* only for demo */
  background-color: gray;
  /* only for demo */
  height: 100%;
  order: 15;
}

.container:after {
  content: "";
  height: 100%;
  order: 25;
}

.red {
  order: 10;
  background-color: red;
}

.green {
  order: 20;
  background-color: green;
}

.blue {
  order: 30;
  background-color: blue;
}

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>