如何在一个DIV元素中将两个元素底部对齐？

Question

我目前使用一个包含2个底部对齐单元格的表格来实现这一点。虽然我可以接受这种表格解决方案，但我想知道是否有可能只用CSS和HTML（不需要JavaScript）就能实现。

要求:
* 文本和图像的大小未知，但是两者的组合宽度不会超过包含元素的宽度。 （例如，如果我稍后想更改图像或文本，则不希望深入到ccs文件中）
* 图像与左侧对齐，而文本（实际上是水平列表）与右侧对齐。

编辑：回应 Kos,

• 文本和图像的大小都是动态的，无论是高度还是宽度，但两个元素的组合宽度不会超过包含元素的宽度。
  
• 图像和文本应该底部对齐。
  
• 包含元素应紧密适合最高的元素。

- Ray Zhou

---

你的描述不够清晰 - 你没有提到什么是动态的，什么是静态的，什么依赖于什么。黑色边框是否应该垂直缩放以匹配图像？它是否具有恒定的高度并且应该缩放图像？还是底部对齐？等等。 - Kos

我确实说过元素的大小事先是未知的。但我编辑过以使其更加清晰。 - Ray Zhou

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>

- user188654

---

这正是我会做的方式。 - Bosworth99

包装器的高度怎么样？ - Moak

这很好，谢谢。但就像s_hewitt和Moak所说的那样，如果不指定高度，它是无法工作的。 - Ray Zhou

忘记在编辑原帖后点击提交了 :) 现在试一下。 - user188654

为了让最新的编辑在Chrome中生效，必须在.text中添加margin:0;。 - s_hewitt

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>

- Moak

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

- Steven