将文本与图像底部对齐

Question

从标记开始

#row { }
#label { float: left; width:100px }
#image { float: left }

<div id="row">
    <div id="label">Label Here</div>
    <div id="image"><img src="http://placekitten.com/100"></div>
    <div id="image"><img src="http://placekitten.com/100"></div>
</div>

如下所示:http://jsfiddle.net/Hyx5n/

我想将标签向下移动到图像的下边缘.所以它看起来像这样:

我试过在容器中放置"position:relative",在标签div中放置"position absolute".但随后图像不再在同一行:http://jsfiddle.net/Hyx5n/1/

Answer 1

您可以执行以下操作(http://jsfiddle.net/Hyx5n/10/).vertical-align财产的众多用途之一.这涉及删除<div>'s和' float虽然.你可以用<span>'s 代替它们,display:inline-block以提供更大的灵活性.

HTML:

<div id="row">
    <span id="label">Label Here</span>
    <img src="http://placekitten.com/100" />
    <img src="http://placekitten.com/100" />
</div>

CSS:

#row { vertical-align:bottom }
#label { display:inline-block; }