Выровняйте два встроенных divs по дну, с обеих сторон

Question

Я ищу динамически выровнять следующие два элемента вдоль нижней части контейнера, чтобы они занимали противоположные углы. Аналогично тому, как Stackoverflow Logo и Ask Question выровнены по нижнему краю, но на противоположных углах их контейнера.

Вы можете увидеть тестовый случай JFiddle здесь: http://jsfiddle.net/M5BuZ/

Более интересно, я бы предпочел, чтобы это работало без добавления фиксированного пространства маржи в right элемента. Таким образом, если элемент left должен расти по высоте, выравнивание будет сохранено.

Answer 1

Похоже, что левый элемент будет единственным, меняющимся по высоте? Если это так, то это должно работать для вашей ситуации на основе ваших jsfiddle:

#container { 
    border: 1px solid red; 
    float: left; 
    width: 400px; 
    position: relative; 
} 
#left, #right { 
    border: 2px solid red; 
    background: #ccc; 
    vertical-align: bottom; 
    display: inline-block; 
    /* ie6/7 */ 
    *display: inline; 
} 
#right { 
    padding: 20px; 
    width: 100px; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

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

EDIT: Новый jsFiddle