如何底部對齊DIV元素中的兩個元素？

enter image description here 如何底部對齊DIV元素中的兩個元素？

我目前正在用2個底部對齊的單元格進行此操作。我對錶的解決方案沒問題，但只是想知道這是可能的（只是CSS和HTML，沒有JavaScript）。

要求：
*文字和圖片的尺寸未知，但兩者的合併寬度不會超過包含元素的寬度。（例如，如果我以後想要更改圖像或文本，我不想潛入ccs文件）
*圖像對齊到左側，文本（實際上是水平列表）對齊到右側。

編輯：響應於科斯，

文本的大小和圖像是動態的，被它的高度或寬度，但是這兩個元件的組合寬度將不超過包含元素的寬度。
圖像和文字應該底部對齊
包含的元素應該緊貼最高的元素。

來源

2011-07-27 Ray Zhou

你的描述不夠清晰 - 你沒有提到什麼是動態的，什麼是靜態的，要看什麼什麼。黑邊應該垂直縮放以匹配圖像嗎？它是不變的高度，圖像是否應該縮放？還是底部對齊？等等。 – Kos

我曾經說過，元素的大小在未知時間之前是未知的。但我編輯它使其更加清晰。 –

HTML

<div class="wrapper"> 
    <img src="" class="image" /> 
    <p class="text">Hello world!</p> 
</div>

CSS

.wrapper { 
    position: relative; 
    width: 500px; 
} 

.image { 
    position: absolute; 
    display: block; 
    left:0; 
    bottom: 0; 
} 

.text { 
    position: absolute; 
    right:0; 
    bottom: 0; 
}

編輯：我添加了相應的HTML代碼。

編輯2：在殼體包裝件的高度是未知的（唯一的限制是具有圖像配總是比的.text更高）

CSS

.wrapper { 
    position: relative; 
    width: 500px; 
} 
.image { 
    vertical-align: bottom; 
} 

.text { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
}

HTML

<div class="wrapper"> 
    <img class="image" src="" /> 
    <p class="text"> 
     Hello world! 
    </p> 
</div>

來源

2011-07-27 15:06:03 brezanac

這正是我如何做到這一點。 – Bosworth99

包裝紙的高度如何？ – Moak

除非已知div.wrapper的高度，否則這似乎不適用於Chrome或IE9。 –

<div style="width:400px; overflow:visible; position:relative;"> 
    <img src="#" alt ="#" style="float:left;"/> 
    <p style="position:absolute; bottom:0; float:right;">Lorem Ipsum</p> 
</div>

來源

2011-07-27 15:06:20 Moak

這應該工作，我認爲：

HTML

<div class="outer"> 
    <img src="" title="" /> 
    <div class="text">Some text </div> 
</div>

CSS

.outer {display: inline-block; width: 350px; } 
.outer img {float: left;} 
.outer .text {float: right; }

來源

2011-07-27 15:07:52 Steven

如何底部對齊DIV元素中的兩個元素？

回答

相關問題