Выравнивание div по высоте

[To_wave]

В процессе изучения и практики верстке споткнулся о такой момент:

Как выровнять div блоки в стоке по высоте наибольшего (чтобы border-bottom всех трех блоков в строке был на одном уровне)?

 

вот что сделано

 

вот что задумано

 

p.s. уважаемые модераторы, исправьте пожалуйста опечатку в названии темы.

Edited September 17, 2014 by To_wave

[swandev]

С помощью js(jquery)

1. проходите по всем блокам

2. ищите самый высокий блок в ряду

3. берете его высоту и задаете ее остальным блокам

 

 

ну или ищите готовый плагин "equal heigh"

[To_wave]

С помощью js(jquery)

1. проходите по всем блокам

2. ищите самый высокий блок в ряду

3. берете его высоту и задаете ее остальным блокам

 

 

ну или ищите готовый плагин "equal heigh"

А можно ли без скриптов? На чистом HTML+CSS

[Stright]

А если попробовать всем блокам задать минимальную высоту, равную высоте самого большого блока, и  vertical-align: top;? Чисто как предположение

Хотя, если контент в блоках изменится, и самый большой блок станет еще больше, то и высоту придется менять

Edited September 17, 2014 by Stright

[To_wave]

А если попробовать всем блокам задать минимальную высоту, равную высоте самого большого блока, и  vertical-align: top;? Чисто как предположение

высота самого большого блока величина непостоянная и зависит от контента, когда больше, когда меньше. в этом случае снова приходим к скриптам.

[Aleksandr.L]

Ну или flexbox, например. Или извращаться таблицами.

Edited September 17, 2014 by Aleksandr.L

[Great Rash]

Сделайте просто бордер сверху, а не снизу.

http://codepen.io/GreatRash/pen/mwfGD

[To_wave]

Сделайте просто бордер сверху, а не снизу.

http://codepen.io/GreatRash/pen/mwfGD

Эта идея не прокатит, допустим во второй строке будет всего 2 превью. Тогда в первой строке 3я останется без бордера.

По поводу таблиц - есть над чем подумать.

А подкажите еще, стоит ли пробовать flex? Как он будет поддерживаться браузерами?

[swandev]

 

Сделайте просто бордер сверху, а не снизу.

http://codepen.io/GreatRash/pen/mwfGD

Эта идея не прокатит, допустим во второй строке будет всего 2 превью. Тогда в первой строке 3я останется без бордера.

По поводу таблиц - есть над чем подумать.

А подкажите еще, стоит ли пробовать flex? Как он будет поддерживаться браузерами?

 

http://caniuse.com/

[To_wave]

 

Сделайте просто бордер сверху, а не снизу.

http://codepen.io/GreatRash/pen/mwfGD

Эта идея не прокатит, допустим во второй строке будет всего 2 превью. Тогда в первой строке 3я останется без бордера.

По поводу таблиц - есть над чем подумать.

А подкажите еще, стоит ли пробовать flex? Как он будет поддерживаться браузерами?

 

что с таблицами, что с flex - все одно.

(по ссылке выше оставил вариант с таблицами) никаких изменений

[Switch74]

есть смысл делать бордер не для блоков, а для их обертки, если у вас всегда 3 блока там

иначе есть способ создания псевдо блока через абсолют у которого и указывать границу http://jsfiddle.net/96aag6qq/1/

[SelenIT]

Есть вот такое старенькое решение: http://chikuyonok.ru/2011/04/inline-vertical-align/

 

Но флексами, особенно с flex-flow:row-wrap, должно быть нормально, просто бордер надо ставить непосредственным потомкам flex-контейнера, а не внутренним элементам.