是否可以使用flex-box,所以在我的小提琴示例中,顶部框(粉红色框)的高度相等,底部框(橙色框)的内容位于顶部框的下方?
我尝试将display:flex
应用于子元素,但这为底部内容添加了新列。
https://jsfiddle.net/b9eyzap3/1/
.box-container {
display: flex;
}
.box {
//display: flex;
width: 33%;
}
.top {
background-color: pink;
}
.bottom {
background-color: orange;
}
<div class="box-container">
<div class="box">
<div class="top">
box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1
</div>
<div class="bottom">
second block
</div>
</div>
<div class="box">
<div class="top">
box 2 box 2 box 2 box 2 box 2 box 2 box 2 box 2 box 2 box 2
</div>
<div class="bottom">
second block
</div>
</div>
<div class="box">
<div class="top">
box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3
</div>
<div class="bottom">
second block
</div>
</div>
</div>
最佳答案
在您的顶级课程中添加以下内容:flex:1;
将以下内容添加到您的框类中
display:flex;
flex-direction:column;
关于html - 如何使用Flexbox使我的顶部块占用更多的空白空间,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46779086/