使每行的列元素高度相等

Question

这是我想要得到的布局：

因此，无论这些 div 中包含什么，我都希望它们都拉伸到该行上最大 div 的高度，以便所有内容保持对齐。

但是，我想不出一种方法可以使项目具有相同的高度以使它们都对齐。我可以使用 CSS 表（使用 display: table），但我需要按行而不是按列将其拆分，这样语义就会混乱。

除了display: table，我觉得应该有一种使用 flexbox 的方法，但我一生都无法弄清楚它可能是什么。我可以通过在列周围添加另一个容器来使容器 div 与 flex 相同，但我不确定如何使用它来使子项具有相同的高度。

我也可以使用 Javascript 循环遍历所有这些，但这种费用就像一个可怕的、低效的解决方案。

这里有一些代码显示 A) 我想要拥有的东西，无论 div 内的内容如何，​​以及 B) 当前发生的事情。

Codepen

* {
  font-family: Helvetica, sans-serif;
}

h2 {
  text-align: center;
  clear: both;
  padding-top: 2em;
}

.col {
  float: left;
  width: 30%;
  background-color: #ebebeb;
  margin-left: 1em;
}
.col div {
  padding: 1em;
  width: 80%;
  margin: 0 auto;
}
.col .sectionOne {
  background-color: #2b2b2b;
  color: #fff;
}
.col .sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
  margin-top: 1em;
}
.col .sectionThree {
  background-color: #8c8c8c;
  color: #fff;
  margin-top: 1em;
}

<h2>Everything Aligned. The world is a happy place.</h2>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>


<h2>Misaligned. Chaos descends.</h2>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>

编辑： 每个.col 代表 Wordpress 归档页面中的一个帖子，因此必须按列排列。

Answer 1

如果不使用脚本，使用 Flexbox 做到这一点的唯一方法是删除 col 并使用 order 属性在视觉上定位它们按列显示。

原因很简单，sections 需要同级才能使每行的高度相等。

根据项目的数量，可能需要对它们进行分组以将必要的 CSS 规则保持在合理的水平，尽管由于问题中不可用，我在这里展示了一个基于现有数量的解决方案项目。

作为已移除的col 的背景颜色的替代品，我使用了边框来简化它，但也可以使用伪元素或额外的内部元素来实现相同的效果。

Updated codepen

堆栈sn-p

* {
  font-family: Helvetica, sans-serif;
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.cols div {
  padding: 1em;
  border: 1em solid #ebebeb;
  box-sizing: border-box;
  width: 30%;
}
.cols .sectionOne {
  background-color: #2b2b2b;
  color: #fff;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.cols .sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
  border-width: 0 1em 1em 1em;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.cols .sectionThree {
  background-color: #8c8c8c;
  color: #fff;
  border-width: 0 1em 1em 1em;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

<div class="cols">

  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>

</div>

---

更新

如前所述，作为超过 3 个帖子和 3 列布局的示例，人们可以简单地重复上述解决方案，并添加一个额外的规则，给出除第一个 cols 之外的所有内容上边距。

堆栈sn-p

* {
  font-family: Helvetica, sans-serif;
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.cols + .cols {
  margin-top: 1em;
}
.cols div {
  padding: 1em;
  border: 1em solid #ebebeb;
  box-sizing: border-box;
  width: 30%;
}
.cols .sectionOne {
  background-color: #2b2b2b;
  color: #fff;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.cols .sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
  border-width: 0 1em 1em 1em;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.cols .sectionThree {
  background-color: #8c8c8c;
  color: #fff;
  border-width: 0 1em 1em 1em;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

<div class="cols">

  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>

</div>

<div class="cols">

  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa.
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus.
  </div>

</div>

Answer 2

在未来，你可以使用网格和单个容器：

* {
  font-family: Helvetica, sans-serif;
}

h2 {
  text-align: center;
  clear: both;
  padding-top: 2em;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
  background: repeating-linear-gradient(to right, transparent 1%, #ebebeb 1%, #ebebeb 33%, transparent 33%, transparent 34%);
}

div {
  padding: 1em;
}

div div {
  margin: 0 4%;
}

.sectionOne {
  background-color: #2b2b2b;
  color: #fff;
  grid-row: 1
}

.sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
  grid-row: 2
}

.sectionThree {
  background-color: #8c8c8c;
  color: #fff;
}

.grid {counter-reset:div}
.grid>div:before {
  counter-increment:div;
  content:'div number:'counter(div);
  background:yellow;
  color:red;
  padding:0 0.5em;
  font-size:0.75em;
}

<h2>Everything Aligned. The world is a happy place.</h2>
<div class="grid">
<!-- first post-->
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur
    in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
<!-- end first post-->
<!-- second post-->
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
<!-- end second post-->
<!-- third post-->
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus lorem
  </div>
<!-- end third post-->
</div>

有用的资源：

• https://css-tricks.com/snippets/css/complete-guide-grid/

• http://gridbyexample.com/

• 和codepen to play with

• A你到了未来了吗？在这里查看http://caniuse.com/#search=grid ;)

Answer 3

这可以通过 flexbox 完成，但请注意它在 Internet Explorer 11 中是 isn't fully supported。

首先，将.col 上的float: left 替换为display: flex。
其次，将您的 margin-top: 1em 声明移至 .col。

* {
  font-family: Helvetica, sans-serif;
}

h2 {
  text-align: center;
  clear: both;
  padding-top: 2em;
}

.col {
  display: flex;
  margin-top: 1em;
  background-color: #ebebeb;
}
.col div {
  padding: 1em;
  width: 80%;
  margin: 0 auto;
}
.col .sectionOne {
  background-color: #2b2b2b;
  color: #fff;
}
.col .sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
}
.col .sectionThree {
  background-color: #8c8c8c;
  color: #fff;
}

<h2>Everything Aligned. The world is a happy place.</h2>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>


<h2>Misaligned. Chaos descends.</h2>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>

注意flexbox 没有折叠边距或类似border-spacing 的表格。这个可以通过在.col div 上设置margin 来解决，尽管您可能想要更改背景。

此外，您使用名称 .col 是违反直觉的，因为您实际上每 行 有三个部分。您可能需要注意这一点！

希望这会有所帮助！ :)

Answer 4

如果您将它们组织成行而不是列，则可以在（行）容器上使用display: flex，这具有您想要的效果。注意：我还在子元素上使用了固定（百分比）宽度设置来实现这一点。

.col {
  display: flex;
  margin-bottom: 10px;
}

.col>div {
  width: 31%;
  margin: 1%;
  background: #ddd;
}

<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>

Answer 5

这是一个使用 CSS 网格布局的简单解决方案。

特点：

• 所有行都是该行中最高元素的高度
• 元素以列而非行的形式流动
• 可以删除额外的 HTML 容器
• 代码简洁高效

codepen

body {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-gap: 1em;
  padding: 1em;
}

.sectionOne   { background-color: #2b2b2b; }
.sectionTwo   { background-color: #5f5f5f; }
.sectionThree { background-color: #8c8c8c; }
div           { padding: 1em; color: #fff; }

<div class="sectionOne">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
  Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
  Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
  Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>

浏览器支持 CSS 网格

• Chrome - 自 2017 年 3 月 8 日起提供全面支持（版本 57）
• Firefox - 自 2017 年 3 月 6 日起提供全面支持（版本 52）
• Safari - 自 2017 年 3 月 26 日起全面支持（版本 10.1）
• Edge - 自 2017 年 10 月 16 日起提供全面支持（版本 16）
• IE11 - 不支持当前规范；支持过时版本

这是完整的图片：http://caniuse.com/#search=grid