Как выровнять два элемента в элементе DIV снизу?

Question

В настоящее время я делаю это с таблицей с двумя выровненными снизу ячейками.Я в порядке с табличным решением, но просто интересно, если это возможно с (только CSS и HTML, без JavaScript).

Требование:* Размеры текста и изображения неизвестны, но объединенная ширина двух не будет превышать ширину содержащего элемента.(например, если я позже захочу изменить изображение или текст, я не хочу погружаться в файл ccs)* Изображение выравнивается по левому краю, а текст (фактически горизонтальный список) выравнивается по правому краю.

Редактировать: В ответ на Кос

• размеры текста и изображений являются динамическими, будь то высота или ширина, НО общая ширинадва элемента не превысят ширину содержащего элемента.
• изображение и текст должны быть выровнены снизу
• содержащий элемент должен плотно прилегать к самому высокому элементу.

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>

Answer 2

Это должно работать, я думаю:

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

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