垂直對齊兩個不同高度的右拉元素（Bootstrap）

Question

我有兩個鏈接（一個文本和一個圖像），我試圖右拉並且每個垂直對齊都有底部。但現在，它看起來像這樣：

（垂直對方的頂部對齊）

相關HTML：

<div class="col-md-7"> 
    <div class="thumbnail"> 
     <div class="caption clearfix"> 
      <h2>Heading</h2> 
      <p class="thin">Donut jelly beans muffin cupcake. Oat cake caramels gingerbread cotton candy.</p> 
      <p class="thin">Chupa chips biscuit jelly chocolate bar danish caramels sugar plum cupcake.</p> 
      <a href="#" class="pull-right"><img src="http://placehold.it/100x70"></a> 
      <a href="#" class="pull-right">See example</a> 
     </div> 
    </div> 
</div> 

有誰知道我怎麼會垂直對齊每個元素'底部？

Answer 1

一種方法是將兩個A元素放在div容器中，然後將該div浮動到右側。從那裏，將A元素設置爲內嵌塊和垂直對齊：底部。這是一個工作示例：http://jsfiddle.net/z26s7nb1/2/

<div class="col-md-7"> 
<div class="thumbnail"> 
    <div class="caption clearfix"> 
     <h2>Heading</h2> 
     <p class="thin">Donut jelly beans muffin cupcake. Oat cake caramels gingerbread cotton candy.</p> 
     <p class="thin">Chupa chips biscuit jelly chocolate bar danish caramels sugar plum cupcake.</p> 
     <div class="pull-right"> 
      <a href="#">See example</a><a href="#"><img src="http://placehold.it/100x70"></a></div> 
    </div> 
    </div> 
</div> 

而且你的CSS：

.pull-right 
{ 
    float: right; 

} 
    .pull-right a 
{ 
    display: inline-block; 
    vertical-align: bottom;  
}