我有一个.parent
div,其中我有一个未知个.child
div。我需要将子div放在一个垂直网格中,所有这些都必须是相等的高度。不幸的是,我无法使用javascript。
我尝试了display: inline-block
和float: left
的不同组合,但我无法让孩子们达到相同的高度。
我可以使用display: table-cell
达到相同的高度但是我遇到另一个问题,如果总宽度超过容器宽度,孩子们不会分成多行。
有没有办法用纯css做到这一点?我只需要支持IE10 +,如果有帮助(flexbox?)
答案 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。