Выровнять div на дно контейнера

Я понял, что это будет просто, мне нужно выровнять оба внутренних div (зеленого и синего) до нижней части их контейнера (красный). Я надеюсь не использовать абсолютное позиционирование, и мне нужно, чтобы он был совместим с типом 2.6.6.8 ff chrome.

<div style="border:1px solid red;">
    <div style="border:1px solid green; width:20px; height:20px; float:left;"></div>
    <div style="border:1px solid blue; width:20px; height:30px; float:left;"></div>
    <div style="clear:both;"></div>
</div>

Я попытался использовать vertical-align, но не могу найти простое решение.

спасибо за помощь, стр.

ИЗМЕНИТЬ здесь мою попытку решения abs pos:

<div style="border:1px solid red; position:relative;">
    <div style="border:1px solid green; width:20px; height:20px; float:left; position:absolute; bottom:0px;"></div>
    <div style="border:1px solid blue; width:20px; height:30px; float:left; position:absolute; bottom:0px;"></div>
    <div style="clear:both;"></div>
</div>

Ответы

Ответ 1

Почему вы не можете использовать абсолютное позиционирование? Вертикальное выравнивание не работает (кроме таблиц). Сделайте свою позицию контейнера: относительной. Затем абсолютно поместите внутренние divs с помощью bottom: 0; Должно работать как шарм.

EDIT By zoidberg (я обновлю ответ)

<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;">
   <div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div>
   <div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div>
</div>

Ответ 2

Современный способ сделать это с помощью flexbox, добавив align-items: flex-end; в контейнер.

С этим контентом:

<div class="Container">
  <div>one</div>
  <div>two</div>
</div>

Используйте этот стиль:

.Container {
  display: flex;
  align-items: flex-end;
}

https://codepen.io/rds/pen/gGMBbg

Ответ 3

Я не люблю абсолютное позиционирование, потому что почти всегда есть побочный ущерб, то есть непреднамеренные побочные эффекты. Особенно, когда вы работаете с отзывчивым дизайном. Кажется, есть альтернатива - техника песочницы. Вставив элемент "helper", либо в разметку через CSS, мы можем нажимать элементы до нижней части контейнера. См. http://community.sitepoint.com/t/css-floating-divs-to-the-bottom-inside-a-div/20932 для примеров.

Ответ 4

Вы можете обмануть! Скажите, что ваш div равен 20px, поместите div вверху следующего контейнера и установите

position: absolute;
top: -20px;

Он может быть не семантически чистым, а масштабируется с помощью откликов