如何在DIV元素中对齐两个元素？

Question

​

​

我目前正在用一个带有两个底部对齐单元格的表格来做这件事。我对表解决方案没有意见，只是想知道这是否可以(只有css和html，没有javascript)。

要求：

*文字和图像的大小未知，但两者的合并宽度将不超过包含元素的宽度。(例如，如果我以后想更改图像或文本，我不想深入到ccs文件中)

*图像与左对齐，文本(实际上是水平列表)与右侧对齐。

编辑：对Kos的回应

• 文本和图像的大小是动态的，无论是高还是宽，但是这两个元素的合并宽度不会超过包含元素的宽度。

• 图像和文本应该是底部对齐的

• 包含的元素应该紧贴最高的元素。

Answer 1

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

编辑：--我添加了适当的代码。

编辑2:，以防包装器的高度未知(唯一的限制是.image必须始终高于.text)

CSS

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

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

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