Boostrap 3 css垂直對齊兩個div一個頂部一個底部

Question

問題：所以垂直對齊的問題是我有兩個div在最後一列，我試圖讓一個留在頂部，一個留在底部無論中央柱子如何增長。我可以通過使用固定高度來解決這個問題，但在這種情況下這並不好。

這裏是我的代碼示例：JS Fiddle

HTML：

<div class="row" class="property-bundle"><!-- (x) number of these --> 
    <div class="col-xs-11 wrapper"> 
     <div class="row"> 
      <div class="col-xs-2 pull-left vendor"> 
       <img src="http://placehold.it/100x100" /> 
      </div> 

      <div class="col-xs-8 properties-list">       
       <div class="row" class="property-line"> 
       <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div> 
       <div class="col-xs-10"><p>Flat 1</p></div> 
       </div> 

       <div class="row"><hr/></div> 

       <div class="row" class="property-line"> 
       <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div> 
       <div class="col-xs-10"><p>Flat 2</p></div> 
       </div> 

       <div class="row"><hr/></div> 

       <div class="row" class="property-line"> 
       <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div> 
       <div class="col-xs-10"><p>Flat 3</p></div> 
       </div>      
      </div> 

      <div class="col-xs-2 costs"><!-- costs column --> 
       <div class="row total"> 
       <h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top--> 
       </div> 

       <div class="row" class="fees"> <!--stay at bottom-->     
       <div class="col-xs-12"> 
        <hr/> 
        <p class="text-right">+ Materials £300K</p> 
        <p class="text-right">+ Build £100K</p>         
       </div> 
       </div>  
      </div>  
     </div> 
     </div> 
    </div> 

CSS：

.wrapper {border: 1px solid black; padding: 10px; margin: 15px;} 

.vendor {min-width: 120px;} 

.properties-list {background-color: aquamarine} 

.costs {vertical-align: top; min-width: 150px; vertical-align: center} 

.fees {vertical-align: bottom; } 

h3 {font-weight: 400} 
h4 {color: green} 

.total { margin-right: 0px; } 

Answer 1

好吧，我簡化這一點，但基本上靈活做了我需要非常多謝謝愛丁普齊奇把我放在正確的線上！這也讓我能夠修正第一個和最後一個欄寬，並使中間的一個動態變化。

JsFiddle

<div class="row-flex"> 
    <div class="col-flex-1"> 
    <img src="http://placehold.it/100x100" /> 
    </div> 
    <div class="col-flex-2"> 
    <div class="row" class="property-line"> 
     <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div> 
     <div class="col-xs-10"> 
     <p>Flat 1</p> 
     </div> 
    </div> 

    <div class="row"> 
     <hr/> 
    </div> 

    <div class="row" class="property-line"> 
     <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div> 
     <div class="col-xs-10"> 
     <p>Flat 2</p> 
     </div> 
    </div> 

    <div class="row"> 
     <hr/> 
    </div> 

    <div class="row" class="property-line"> 
     <div class="col-xs-2"><img src="http://placehold.it/80x140" /></div> 
     <div class="col-xs-10"> 
     <p>Flat 3</p> 
     </div> 
    </div> 
    </div> 
    <div class="col-flex-3"> 

    <div class="pos-top"> 
     <div class="row right-text"> 
     TOP right 
     </div> 
    </div> 
    <div class="pos-bottom"> 
     <div class="row right-text"> 
     <p> 
      BOTTOM right 
     </p> 
     </div> 
    </div> 

    </div> 
</div> 

CSS

.row-flex { 
    height: auto; 
    display: flex; 
    flex-flow: row column; 
} 

.col-flex-1 { 
    min-width: 200px; 
    border-left: 1px #ccc solid; 
    flex: 0 0; 
} 

.col-flex-2 { 
    width: 80%; 
    border-left: 1px #ccc solid; 
    flex: 1 1; 
} 

.col-flex-3 { 
    min-width: 200px; 
    border-left: 1px #ccc solid; 
    flex: 0 0; 
} 

.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    width: 100%; 
    height: 100%; 
    background-color: lightgrey; 
} 

.pos-top { 
    display: -webkit-flex; 
    display: flex; 
    height: 50%; 
    width: 100%; 
    -webkit-align-items: flex-start; 
    align-items: flex-start; 
    background-color: yellow; 
} 

.pos-bottom { 
    display: -webkit-flex; 
    display: flex; 
    height: 50%; 
    width: 100%; 
    -webkit-align-items: flex-end; 
    align-items: flex-end; 
    background-color: green; 
} 

.right-text { 
    text-align: right; 
    width: 100%; 
} 

Answer 2

嗨，你可以嘗試使用flexbox

我只是改變你的HTML這樣的：

<div class="col-xs-2 costs"> 
       <!--stay at top--> 
     <div class="total"> 
      <h3 class="text-right">TOTAL: £1,2M</h3> 
     </div> 
        <hr/> 
       <div class="materials"> 
        <p class="text-right">+ Materials £300K</p> 
        <p class="text-right">+ Build £100K</p> 
       </div>         
       </div> 
       </div>  

然後我加上costs DIV display:flex;和total DIV flex-grow: 1這flex-grow將把材料推到div的底部。

你只需要在body，html，row和costs DIV添加height:100%

這裏是CSS：

.costs { 
    vertical-align: center; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

.total { 
    flex-grow: 1; 
} 

你可以看到這個鏈接，例如：https://jsfiddle.net/3L5Lbwhn/9/