是否有唯一的 CSS 解决方案可以使垂直网格中的 div 高度相等？答案

【问题标题】：Is there a CSS only solution to make divs equal height in a vertical grid?是否有唯一的 CSS 解决方案可以使垂直网格中的 div 高度相等？
【发布时间】：2016-11-16 02:23:32
【问题描述】：

我有一个.parent div，其中我有一个未知数量的.child div。我需要子 div 处于垂直网格中，并且它们都需要相等的高度。不幸的是，我不能为此使用 javascript。

我尝试了display: inline-block 和float: left 的不同组合，但我无法让孩子们的身高相同。

我可以使用display: table-cell 达到相同的高度，但是我遇到了另一个问题，即如果总宽度超过容器宽度，孩子们不会分成多行。

有没有办法用纯 css 做到这一点？如果有帮助，我只需要支持 IE10+（flexbox？）

【问题讨论】：

flexbox 可以提供帮助（无需设置明确的高度），但每行将具有匹配的高度，并且每行的高度可以不同...
这不是问题。只要每行的高度相同。
好的，看看我在下面创建的演示 - 它包含窗口宽度的变化，并且每一行都有相同的高度......
你是明星！！

标签： html css css-float flexbox

【解决方案1】：

您可以使用 wrapping flexbox - 查看当您调整窗口大小时子 div 换行时高度是如何自动调整的（由于默认的 align-items:stretch 属性）。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
}
.wrapper > div {
  border: 1px solid red;
}

<div class="wrapper">
  <div>
    some text here some text here
  </div>

  <div>
    some text here
    <br/>more text here
  </div>

  <div>
    some text here
    <br/>more text here and some more and some more
  </div>

  <div>
    some text here
    <br/>more text here
    <br/>more text here
  </div>

</div>

【讨论】：

【解决方案2】：

是的，你可以使用 flexbox。

.parent{
    display: flex;
}
.child{
    flex:1;
}

【讨论】：

partial support in IE10 怎么样。这会导致此设置出现问题吗？
此外，如果您调整窗口大小，这似乎不会将子项分成多行。

【解决方案3】：

您可以尝试使用视口单位。

这样的事情可能会奏效：

.child {
    height: 1vw;
}

这将使子元素具有视口宽度的 1/100。

To read more about viewport units

Viewport units support

【讨论】：

如果内容超过该高度，这将使孩子有滚动条。