使列元素在每行上的高度相等

时间：2017-10-25 23:41:30

标签： html css css3 flexbox css-grid

这是我想要的布局： This is the layout I want to get

所以不管这些div中包含的是什么，我希望它们全部延伸到该行上最大div的高度，以便所有内容保持一致。

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

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

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

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

Codepen

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

修改 每个.col代表Wordpress存档页面中的帖子，因此必须按列排列。

5 个答案:

答案 0 :(得分：1)

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

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

有用的资源：

答案 1 :(得分：1)

如果不使用脚本，使用Flexbox的唯一方法是删除col并使用order属性直观地将它们放在列中。

原因很简单，部分需要是兄弟姐妹才能使每行的身高相等。

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

作为已移除的col背景颜色的替代，我使用边框使其变得简单，但是可以使用伪元素或额外的内部元素来实现相同的效果。

Updated codepen

Stack snippet

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

更新

如前所述，作为超过3个帖子的示例，以及3列布局，可以简单地重复上述解决方案，并使用额外的规则提供除第一个{{1}之外的所有内容一个上边距。

Stack snippet

＆＃13;
＆＃13; 
cols
＆＃13; 
* {
  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;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

答案 3 :(得分：0)

可以使用 flexbox 来完成此操作，但请注意Internet Explorer 11中的 isn't fully supported 。

首先，用float: left替换.col上的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的表格。通过在margin上设置.col div可以解决 ，但您可能想要更改背景。

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

希望这有帮助！ ：）

答案 4 :(得分：0)

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

特点：

  • 所有行都是行中最高元素的高度
  • 元素按列流动，而不是行
  • 可以删除额外的HTML容器
  • 代码简单而有效

codepen

＆＃13;
＆＃13; 
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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

相关问题
最新问题