如何获得列中未知元素的偶数高度？
如何获得列中未知元素的偶数高度？
提问于 2017-11-10 00:21:12
我使用flex创建偶数列，使用vh使它们具有相同的高度。这很好用，但是在列中我可以有x个条目。我希望每一列中的元素都是均匀的高度，这取决于存在的项目数量(使用css)。
1=100%2=50%3= 33.33%等等。
我知道我可以通过JS做到这一点，但我想通过css通过flex、grid或elese实现自动化。
回答 1
Stack Overflow用户
发布于 2017-11-10 00:30:32
我试过复制你的问题。在.item%s上使用flex: 1，以便每个项目占用相等的空间(根据问题陈述)。
看看下面的代码片段：
body {
margin: 0;
}
.parent {
width: 80%;
padding: 20px;
display: flex;
border: 1px solid red;
}
.child {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
padding: 20px;
border: 1px solid blue;
height: 60vh;
}
.item {
flex: 1;
background: lightGreen;
border: 1px solid green;
}<div class="parent">
<div class="child">
<div class="item">33.33%</div>
<div class="item">33.33%</div>
<div class="item">33.33%</div>
</div>
<div class="child">
<div class="item">50%</div>
<div class="item">50%</div>
</div>
<div class="child">
<div class="item">100%</div>
</div>
</div>
希望这就是你想要实现的目标。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47206786
复制相关文章
相似问题