对齐各个事业部在引导山坳底部1

所以我试图让相关盒粘在底部和对齐到下一个引导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格在底部停留，以及这是不是我的预期。 ...

来源

2017-08-07 rukia_kuchiki_21

这可以使用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>

希望这有助于！ :)

来源

2017-08-07 03:47:58

对齐各个事业部在引导山坳底部1

回答

相关问题