對齊div的底部，同時保持調整大小的可訪問性

我已經看到如何強制一個Div的含有Div的底部與postion：絕對;和bottom：0px;以及如何強制一個包含Div的擴展容納一個孩子Div，但我無法讓他們一起工作。我正在嘗試製作一個網站，以便在瀏覽器中更改字體大小的觀衆訪問。對齊div的底部，同時保持調整大小的可訪問性

此代碼將強制div到底部，但不會將包含的div擴展爲必需的。如果我將.exhibit_text位置更改爲relative，則包含的Div將展開，但底部對齊將丟失。（該文本是從數據庫中來，所以我不知道它會持續多久或有多大的用戶已設置他們的字體大小。）

<style type="text/css"> 
.exhibit { 
    position: relative; 
} 
.exhibit_text { 
    width: 380px; 
    position: absolute; 
    bottom: 0px; 
    float: left; 
} 
.exhibit_image { 
    height: 300px; 
    width: 400px; 
    margin-left: 450px; 
    background-color:#FF0; 
} 
hr { 
    clear: both; 
} 
</style> 
<hr /> 
<div class='exhibit'> 
    <div class='exhibit_text'><p>Long text: Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. </p> 
    </div> 
    <div class="exhibit_image"> 
    </div> 
</div> 
<hr /> 
<div class='exhibit'> 
    <div class='exhibit_text'><p>Short text: Susan Low-Beer and Meryl McMaster expand our understanding of the genre. </p> 
    </div> 
    <div class="exhibit_image"> 
    </div> 
</div> 
<hr />

來源

2013-06-04 user2449986

我不知道什麼是你的「擴大」的意思，所以我猜你想要的容器（DIV）的div的是在底部和容器（DIV）可擴展高度。

下面的代碼：

.exhibit > div{ 
    display: inline-table; 
    vertical-align: bottom; 
}

試試吧:)

來源

2013-06-04 03:15:09 yuhua

這裏是參考：http：//www.brunildo.org/test/inline-block2.html – yuhua

太棒了！一旦我將它應用於.exhibit_text和.exhibit_image，並刪除了所有其他定位指令（float，bottom，poistion），它就起作用了。謝謝。 – user2449986

但奇怪的是，我似乎不能將內聯表與不同的垂直對齊結合起來......上面的引用僅顯示了每個容器div的一種垂直對齊方式。 – user2449986

我建議擺脫寬度設置上exhibit_text。我會改爲設置min-width: 380px並設置width: auto。這應該意味着div會展開以包含所有內容，並且不會小於380px寬。

編輯：我不是100％確定你試圖實現什麼。我將你的代碼粘貼到一個JSFIDDLE中，並以25px的字體包裝文本。你究竟想達到什麼目的？

The Fiddle

來源

2013-06-04 02:58:23 JosephGarrone

我看着你的小提琴，它仍然有我遇到的問題（雖然不是很好描述）。第一個div容器沒有增加它的高度來容納超大的div div。如果我將.exhibit_text位置更改爲相對，則容器將調整大小，但我失去了底部對齊。謝謝。 – user2449986

對齊div的底部，同時保持調整大小的可訪問性

回答

相關問題