是否有一个CSS唯一的解决方案，使垂直网格div等于高度？ [英] Is there a CSS only solution to make divs equal height in a vertical grid?

问题描述

我有一个 .parent div，其中有一个未知的数字 .child divs。我需要孩子divs在一个垂直的网格，他们都需要是平等的高度。不幸的是，我无法使用javascript。
$ b我已经尝试了的不同组合：display：inline-block 和 float：left ，但我不能让孩子们成为同一个高度。

我可以使用 display：table-cell 来达到同样的高度，但后来遇到另外一个问题：如果总宽度超过容器的宽度，则子节点不会分割成多行。

有没有办法用纯css来做到这一点？我只需要支持IE10 +（如果有帮助的话）（flexbox？） 可以使用包装 （code> align-items：stretch 属性是默认的）当您调整窗口大小时，子div将自动换行。

$ b

* {box-code-css lang-css prettyprint- size：border-box;} body {margin：0;}。wrapper {display：flex; flex-flow：row wrap;}。wrapper> div {border：1px solid red;}

< div类= 包装 > < DIV>这里的一些文字在这里有一些文字< / div> < DIV>这里的一些文字< br />更多的文字在这里< / div> < DIV>这里的一些文字< br />更多的文字在这里，还有一些< / div> < DIV>这里的一些文字< br />更多文字在这里< br />更多文字在这里< / div>< / div>

I have a .parent div and within that I have an unknown number of .child divs. I need the child divs to be in a vertical grid and all of them need to be equal height. Unfortunately, I can't use javascript for this.

I have tried different combinations of display: inline-block and float: left, but I can't get the children to be the same height.

I am able to achieve same height using display: table-cell but then I run into another problem that the children don't split onto multiple lines if the total width exceeds the container width.

Is there a way to do this with pure css? I only need to support IE10+ if that helps (flexbox?)

解决方案

You can use a wrapping flexbox - see how the heights are auto-adjusted (due to the align-items:stretch property which is default) when the child divs wrap as you resize the window.

* {
  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等于高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！