将文本与图像底部对齐

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>和float。您可以将<span>替换为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; }

Answer 2

尝试这样：http://jsfiddle.net/uac3Z/

基本上，

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

与

#row { position:relative; float:left; }
#label { position: absolute; bottom: 0; width:100px }
.image { float: left }
#images { margin-left: 110px }

我制作了一个div＃images，它封装了其他div.image。然后将那些div＃row设置为float，使文本位于底部。因此，div＃标签将出现在图像上方。为了在图像的左边有div＃标签，我使div＃images的左边距为110px（div＃label为100px）。

另请注意，您当前的div＃image应该是一个类而不是id，因为您不止一次使用它。

希望有所帮助：）