如何設置div必須在底部使用CSS？

這是我的產品的DIV，你可以看到演示這樣的：如何設置div必須在底部使用CSS？

<div class="productItem"> 
     <div> 
       <!--image --> 
     </div> 
     <div> 
       <!--text --> 
     </div> 
    </div>

http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg

每個產品都有一個產品形象和產品的文字。圖像位於頂部，文本位於每個圖像下方。但是你可以看到，圖像可以具有不同的大小，所以我不希望文本總是在底部而不是在圖像的下面。除了分配絕對位置之外，我怎樣才能將文本排列在底部。

來源

2010-01-23 DNB5brims

這可能是值得考慮使您的圖像爲標準尺寸。也許是一個大而小的尺寸？當有人點擊較小的圖片時，您總是可以選擇顯示較大的圖片？

你也可以使用這樣的事情簡化您的HTML：

<div class="productItem"> 
    <img class="large" /> 
    <p>Text</p> 
</div>

這將讓你改變取決於圖像（通過給它一個類）的CSS，並減少不必要的div的。

也許強迫圖像使用block屬性在文本上方顯示？

img {display:block;}

來源

2010-01-23 16:44:02 Matt

呃......我不能確保用戶可以給我標準尺寸，但我可以限制最大尺寸。 – DNB5brims 2010-01-23 16:49:02

我必須缺少一些東西，因爲這看起來相當簡單。

<style type="text/css"> 
.productItem { 
    text-align: center; 
} 

<div class="productItem"> 
    <img src="whatever"><br style="clear: both;" /> 
    Text 
</div>

也許還有更多我不理解。

來源

2010-01-23 16:55:39

從您的屏幕截圖看，您的文字總是在圖像下方，但在截圖的右半部分，當小圖像與大圖像位於同一行時，文本不排隊（產品說明不在單元格的底部）。這是你問的嗎？圖像大小變化時如何將文本全部對齊到行底？

您可以將包含所有產品的表格行設置爲<tr valign="bottom">，這會將所有內容都推到底部，將圖像堆疊在文本頂部。這意味着小圖像的底部都會彼此對齊，而不是頂部。如果你想要圖像保持不變，但文字要下去，而不是像這樣的樣式圖像DIV：<div style="height:200px; width:200px; overflow:hidden; text-align:center;">。這將爲較小的圖像創建一個更大的佔位符，以使它們下面的文本全部排成一列，如果圖像太大，它將被裁剪而不是伸出，並導致文本全部脫節。

來源

2010-01-24 22:27:20 MidnightLightning

我假設你有productItem

所以它應該是類似的東西的容器：

<div class="productList"> 
<div class="productItem"> 
    <div> 
     <!--image --> 
    </div> 
    <div class="productText"> 
     <!--text --> 
    </div> 
    </div> 
<div class="productItem"> 
    <div> 
     <!--image --> 
    </div> 
    <div class="productText"> 
     <!--text --> 
    </div> 
    </div> 
</div>

我不知道爲什麼你不想使用絕對定位，但是這是在這唯一的解決方法案例（沒有給圖像或div的固定高度）。

這個設置不會傷害任何東西，並且可以在所有常見的現代瀏覽器上運行，包括ie6。您只需爲產品文本提供不同的類名稱，或使用不同的標籤來解決該問題。

CSS：

.productsList {background:#f00; overflow:hidden;height:1%;position:relative;} 
.productItem {float:left;background:#ff0;} 
.productText {bottom:0;position:absolute;text-align}

嘗試。應該完美地工作

其他解決方案是由MidnightLightining上面寫的。使用圖像容器的固定高度。

來源

2010-01-27 12:38:48 eringen

如何設置div必須在底部使用CSS？

回答

相關問題