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