與圖像

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/

我想向下移動標籤的圖像的底部邊緣。所以它看起來像這樣：

我試圖把：在DIV標籤在容器「相對位置」和「位置絕對」。但隨後的圖像不再在同一行：http://jsfiddle.net/Hyx5n/1/

Answer 1

試試這樣說：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＃圖片封裝了其他div.image的。然後那些div＃行被設置爲浮動，讓文字位於底部。因此，div＃標籤會出現在圖片上方。爲了在圖像左側有div＃標籤，我讓div＃圖像的左邊距爲110px（因爲div＃標籤的大小爲100px）。

另請注意，您當前的div＃圖像應該是類而不是id，因爲您多次使用它。

希望它能幫助:)

Answer 2

你可以做類似如下（http://jsfiddle.net/Hyx5n/10/）。 vertical-align屬性的許多用途之一。這涉及到刪除<div>和float。你可以用來代替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; }