css - 在 bootstrap col 1 的底部对齐单个 Div

Question

所以我试着让 Related box 贴在底部并与下一个 bootstrap div(名片部分)的高度对齐

排序/过滤 div 应该保持在顶部，因为它们是粘性 div。它们在滚动时会粘住。

结构如下:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div id="filter-panels">
      </div>

      <div id="related-services">
      </div>
    </div>

    <div class="col-xs-12">
      <div id="business-cards">
      </div>
    </div>
  </div>
</div>

#related-services div 必须位于网格的底部...并且必须与最后一张名片对齐，#filter-panels div 必须位于顶部，因为它是一个粘性 div。

我尝试将以下内容添加到 .col-xs-12 div...

display: inline-block;
vertical-align: bottom;
float: none

#related-services div 确实位于底部，但是 #filter-panels div 也位于底部，这不是我所期望的。 .

Answer 1

这可以使用 flexbox 解决.

诀窍是将display: flex 赋予 容器和两列。然后，您可以结合使用 flex-direction: column 和 justify-content: space-between 来对齐左侧列的两个组件:

.container {
  display: flex;
}

.left,
.right {
  display: flex;
  width: 50%;
}

.left {
  flex-direction: column;
  justify-content: space-between;
}

#filter-panels,
#related-services {
  border: 1px solid red;
  height: 50px;
  width: 100%;
}

#business-cards {
  border: 1px solid black;
  height: 200px;
  width: 100%;
}

<div class="container">
  <div class="left">
    <div id="filter-panels">Filter panels</div>
    <div id="related-services">Related services</div>
  </div>
  <div class="right">
    <div id="business-cards">Business cards</div>
  </div>
</div>

希望对您有所帮助! :)