How to bottom align two elements in a DIV element?

问题

enter image description here

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).

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.

Edit: In response to Kos,

the sizes of the text and images are dynamic, be it height or width, BUT the combined width of the two elements will not exceed the width of the containing element.
the image and text should be bottom aligned
the containing element should fit tightly the tallest element.

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

EDIT: I added the appropriate HTML code.

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>

回答2:

This should work I think:

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

回答3:

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

来源：https://stackoverflow.com/questions/6846580/how-to-bottom-align-two-elements-in-a-div-element

标签

html

css

browser

css-tables