我目前正在使用带有2个底部对齐单元格的表来执行此操作。我对表格解决方案还可以,但是只是想知道是否可以(仅使用CSS和HTML,没有javascript)。
要求:
*文本和图像的大小未知,但是两者的组合宽度将不超过包含元素的宽度。 (例如,如果以后我要更改图像或文本,则不希望进入ccs文件)
*图像向左对齐,文本(实际上是水平列表)向右对齐。
编辑:为了回应Kos,
最佳答案
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>