是否有 CSS 唯一的解决方案来使垂直网格中的 div 等高？

Question

我有一个 .parent div，其中我有未知个 .child div。我需要 child divs 处于垂直网格中，并且所有这些都需要等高。不幸的是，我不能为此使用 javascript。

我尝试了display: inline-block和float: left的不同组合，但我无法让children达到相同的高度。

我可以使用 display: table-cell 达到相同的高度，但后来我运行遇到另一个问题，如果总宽度超过容器宽度。

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

Answer 1

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

类似这样的方法可能有效：

.child {
    height: 1vw;
}

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

To read more about viewport units

Viewport units support

Answer 2

是的，您可以使用 flexbox。

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

Answer 3

您可以使用 wrapping flexbox - 查看高度是如何自动调整的（由于 align-items:stretch 属性这是默认）当您调整 window.

的大小时子 div 换行

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

是否有 CSS 唯一的解决方案来使垂直网格中的 div 等高？

Is there a CSS only solution to make divs equal height in a vertical grid?

html

css

css-float

flexbox