對齊各個事業部在引導山坳底部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

回答

相關問題