有一个CSS唯一的解决方案,使div在垂直网格中的高度相等吗?

时间:2016-11-16 02:23:32

标签: html css css3 css-float flexbox

我有一个.parent div,其中我有一个未知.child div。我需要将子div放在一个垂直网格中,所有这些都必须是相等的高度。不幸的是,我无法使用javascript。

我尝试了display: inline-blockfloat: left的不同组合,但我无法让孩子们达到相同的高度。

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

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

3 个答案:

答案 0 :(得分:3)

你可以使用包装 flexbox - 当你的孩子为你换行时,看看高度是如何自动调整的(由于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>

答案 1 :(得分:1)

是的,你可以使用flexbox。

script

答案 2 :(得分:0)

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

这样的事可能有用:

.child {
    height: 1vw;
}

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

To read more about viewport units

Viewport units support