Question

我使用的是一个简单的网格框架（http://www.modestgrid.com/），行数固定。是否有任何简单的方法可以使所有行都具有相同的高度，而无需将.row类的高度指定为百分比？

我的6行行类看起来像这样：

.row {
    height: 16.666%;
    padding-bottom: 5px;
}

.row:last-of-type {
    padding-bottom: 0;
}

有没有办法不必指定height: 16.666%;并让CSS自动使所有行具有相同的高度并让它们垂直填充其容器元素？

我想我可以使用<table>或JavaScript来实现这一目标，但我希望有一个纯CSS解决方案。我需要支持IE10和所有最新的其他常见浏览器。

Answer 1

使用 display：table。

It's supported in IE8+ and has a decent support in other browsers as well.

html,
body,
.wrapper {
  height: 100%;
}
.wrapper {
  display: table;
}
.row {
  display: table-row;
  padding-bottom: 5px;
}
.row:last-of-type {
  padding-bottom: 0;
}

<div class="wrapper">
  <div class="row">
    <div>
      Row 1
    </div>
  </div>
  <div class="row">
    <div>
      Row 2
    </div>
  </div>
  <div class="row">
    <div>
      Row 3
    </div>
  </div>
  <div class="row">
    <div>
      Row 4
    </div>
  </div>
  <div class="row">
    <div>
      Row 5
    </div>
  </div>
  <div class="row">
    <div>
      Row 6
    </div>
  </div>
</div>

没有适度网格的解决方案：JSFiddle

使用适度网格的解决方案：JSFiddle

CSS网格中的等高行

1 个答案: