如何使DIV元素中的两个元素底部对齐? [英] How to bottom align two elements in a DIV element?

问题描述

我目前正在使用带有2个底部对齐的单元格的表进行此操作.我对表格解决方案还可以，但是只是想知道是否可以(仅使用css和html，不使用javascript).

I am currently doing this with a table with 2 bottom-aligned cells. I am okay with the table solution, but just wondering if this is possible with (just css and html, no javascript).

要求:
*文本和图像的大小未知，但是两者的组合宽度将不超过包含元素的宽度.(例如，如果以后我要更改图像或文本，则不希望进入ccs文件)
*图像向左对齐，文本(实际上是水平列表)向右对齐.

Requirement:
* The sizes of the text and image are unknown, but the combined width of the two will not exceed the width of the containing element. (e.g. if i later want to change the image or the text, i do not want to dive into the ccs file)
* Image is aligned to the left, and the text (actually, a horizontal list) is aligned to the right.

针对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代码.

I added the appropriate HTML code.

:如果包装的高度未知(唯一的限制是.image必须始终高于.text)

EDIT 2: In case the height of the wrapper is unknown (only restriction is that .image has always to be higher than .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>

这篇关于如何使DIV元素中的两个元素底部对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！