垂直對齊兩個不同高度的右拉元素（引導程序）

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;    
}