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

Question

我目前正在使用帶有2個底部對齊單元格的表格。 我對表解決方案沒問題，但只是想知道這是否可行（只是css和html，沒有javascript）。

需求：
*文本和圖像的大小未知，但兩者的組合寬度不會超過包含元素的寬度。 （例如，如果我以后想要更改圖像或文本，我不想深入ccs文件）
*圖像與左側對齊，文本（實際上是水平列表）與右側對齊。

編輯：回應科斯，

• 文本和圖像的大小是動態的，無論是高度還是寬度，但兩個元素的組合寬度不會超過包含元素的寬度。
  
• 圖像和文字應該是底部對齊的
  
• 包含元素應緊密貼合最高元素。

Answer 1

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：如果包裝器的高度未知（只有限制是.image總是高於.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>

Answer 2

<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>

Answer 3

這應該工作我認為：

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; }