我有两个链接(一个文字和一个图片)我正在尝试向右拉并且每个垂直对齐的底部。但是现在,它看起来像这样:
(与彼此的顶部垂直对齐)
相关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>
有谁知道我如何垂直对齐每个元素的底部?
答案 0 :(得分:3)
一种方法是将两个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;
}