垂直对齐两个不同高度的右拉元素 (Bootstrap)
vertical aligning two pull-right elements of different heights (Bootstrap)
我有两个链接(一个文本和一个图像),我正在尝试 向右拉 并且底部每个垂直对齐。但是现在,它看起来像这样:
(垂直对齐彼此的顶部)
相关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>
有谁知道我如何垂直对齐每个元素的底部?
一种方法是将两个 A 元素放入 div 容器中,然后将 div 浮动到右侧。从那里,将 A 元素设置为 inline-block 和 vertical align: bottom。这是一个工作示例: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;
}
我有两个链接(一个文本和一个图像),我正在尝试 向右拉 并且底部每个垂直对齐。但是现在,它看起来像这样:
相关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>
有谁知道我如何垂直对齐每个元素的底部?
一种方法是将两个 A 元素放入 div 容器中,然后将 div 浮动到右侧。从那里,将 A 元素设置为 inline-block 和 vertical align: bottom。这是一个工作示例: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;
}