如何底部对齐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; }