Выровнять блоки внутри сНа элемента

Question

У меня есть код, который выглядит следующим образом:

<div class="row"> 
    <div> 
    <img src="img1.jpg" /> 
    </div> 
    <div> 
    <img src="img2.jpg" /> 
    </div> 
    <div> 
    <img src="img3.jpg" /> 
    </div> 
</div> 

Я хочу, чтобы выровнять блоки их днища. Как я могу это сделать?

ОБНОВЛЕНИЕ: Спасибо, ребята, за ваши ответы, я не знаю почему, но они мне не помогли. Так вот реальный HTML-код в JS скрипкой: http://jsfiddle.net/rZvqK/

Answer 1

от моего первоначального ответа (в комментарии),

это в вашем CSS

.row > div 
{ 
    display: inline-block; 
    vertical-align: bottom 
} 

уведомление: селектор > DonT хорошо играть с IE7 , , поэтому, если вам нужно рассмотреть этот браузер, перейдите по ссылке .row div в качестве селектора. , но если вам неинтересно IE7, используйте '>', потому что это более spesific.

проверить этот fiddle:

Update: Updated fiddle

1. использование .row > div в selctor, потому что разметка есть другие вложенные DIV находится в .row, и вы не хотите, чтобы повлиять на их. с > tou влияют только на прямые дочерние элементы .row

2. Вы плаваете по своим строкам, и это заставляет их не выравнивать. удалить плавающее (теперь вы можете также удалить clear DIV в конце разметки)

3. при отбрасывании поплавка, вы заметите, что строки Dont подходит в той же строке, что из-за дополнительное расстоянием между строки, вызванные новой строкой между строками в разметке. легче всего исправить для того, как я сделал (удалив пробел между разметкой), смотрите здесь How do I remove extra margin space generated by inline blocks?

4. наконец, они не являются строками, а столбцов.

Answer 2

Вы можете использовать этот CSS

.row div{ 
    display:inline-block; 
    vertical-align:bottom; 
} 

Answer 3

Вы можете использовать так:

.row > div{ 
display: table-cell; 
vertical-align: bottom; 
} 

Но если я понимаю правильно ваш вопрос, вы должны добавить дополнительная разметка вроде <br />, но лучше использовать методы clearfix здесь после div, содержащего img тег.

demo

Answer 4

Вот ваше решение: jsFiddle - with code edit

.spacer a{   
    position: relative; 
    display: block; 
    width: 150px; 
    height: 200px; 
} 
.spacer img{ 
    margin-top: 6px; 
    max-width: 100%; 
    height: auto; 
    position: absolute; 
    bottom: 0px; 
} 

Идея заключается в том, чтобы установить родительский блок в position: relative и дочерний блок к position: absolute; bottom:0px;

Обратите внимание, что, потому что в вашем случае родитель тег является якорем, я также добавил display:block и чтобы все блоки соответствовали одному размеру, я также добавил размеры.