是否可以使用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/

10-11 12:51
查看更多