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

введите здесь описание изображения

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

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

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

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

browser html css css-tables
person Ray Zhou    schedule 27.07.2011    source источник
comment
Ваше описание недостаточно ясное - вы не упомянули, что динамическое, что статичное, что от чего зависит. Должна ли черная рамка масштабироваться по вертикали, чтобы соответствовать изображению? Имеет ли он постоянную высоту и следует ли масштабировать изображение? Или тоже по нижнему краю? И т. д. и т. д.   -  person Kos    schedule 27.07.2011
comment
Я же говорил, что размеры элементов заранее неизвестны. Но я отредактировал его, чтобы сделать его более понятным.   -  person Ray Zhou    schedule 27.07.2011

Ответы (2)


arrow_upward
11
arrow_downward

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: я добавил соответствующий код 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>
person brezanac    schedule 27.07.2011
comment
именно так я бы сделал это. - person Bosworth99; 27.07.2011
comment
А высота обложки? - person Moak; 27.07.2011
comment
Похоже, это не работает в Chrome или IE9, если не известна высота div.wrapper. - person s_hewitt; 27.07.2011
comment
Это хорошо, спасибо. Но, как сказали s_hewitt и Moak, это не работает без указания высоты. - person Ray Zhou; 27.07.2011
comment
Хорошо, если высота не указана, есть несколько способов решить эту проблему, однако вам нужно быть более конкретным, если есть другие ограничения, которые вы не упомянули. Я отредактировал свой ответ и дал решение, которое требует, чтобы ваше изображение слева всегда было выше вашего текста справа, что всегда будет иметь место, судя по вашему описанию. - person brezanac; 27.07.2011
comment
Да, я протестировал ваше решение с изображением, которое выше текста (Hello World). Но мне все еще нужно указать высоту для обертки, чтобы это сработало. - person Ray Zhou; 27.07.2011
comment
Забыл нажать «Отправить» после того, как отредактировал исходный пост :) Попробуйте прямо сейчас. - person brezanac; 27.07.2011
comment
Чтобы последнее редактирование работало в Chrome, необходимо добавить margin:0; к .text. - person s_hewitt; 27.07.2011
comment
Что ж, часть настройки полей необязательна, но важно то, что самая нижняя точка абзаца (с вертикальными полями) всегда будет на одном уровне с нижней стороной обертки. OP должен решить, действительно ли он хочет, чтобы текст абзаца выровнялся с нижней границей оболочки. - person brezanac; 27.07.2011
comment
Спасибо вам, ребята. Когда я делал это без таблицы, я помещал каждый элемент в свой собственный div. Думаю, я злоупотребляю. - person Ray Zhou; 27.07.2011

arrow_upward
1
arrow_downward

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

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; }
person Steven    schedule 27.07.2011