使每行的列元素高度相等

Question

这是我想要得到的布局：

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

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

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

我也可以使用 Javascript 循环遍历所有这些，但这样的解决方案很糟糕，效率很低。

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

* {
  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存档页面中的一个post，所以必须分栏排列。

Answer 1

如果您将它们组织成行而不是列，您可以在（行）容器上使用 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 2

这可以在 Internet Explorer 11 中使用 flexbox, though note that it 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 3

以后可能会用grid和一个容器：

* {
  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 4

这是一个使用 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

Answer 5

如果不使用脚本，使用 Flexbox 的唯一方法是删除 col 并使用 order 属性视觉定位它们 列明智。

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

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

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

Updated codepen

堆栈片段

* {
  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 上边距。

堆栈片段

* {
  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>

使每行的列元素高度相等

Make column elements equal height on each row

html

css

flexbox

css-grid