垂直对齐两个不同高度的右拉元素（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 元素设置为 inline-block 和垂直对齐：底部。这是一个工作示例：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;    
}