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/