Выравнивание <div>

[airy]

Здравствуйте. Только начал. Изучать html, css и т.д.

Возможно задача уже решена и является тривиальной.

Есть много однотипных блоков
<div class="bg">
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
<div class="product"> </div>
</div>
(см. картинки)
с содержимым разного количества.

Как сделать чтобы блоки выстроились в таблицу, при этом высота строк таблицы?
была бы равна высоте максимального элемента в строке

как есть

http://javascript.ru/forum/attachmen...d=139790530 3

как хотелось бы

http://javascript.ru/forum/attachmen...d=139790530 7

Прошу хотя бы натолкнуть на мысль, какие функции по изучать
Или может какая-нибудь готовая функция jquery и т.д.
Заранее благодарен

p.s. если не тот раздел, прошу перекинуть

[airy]

Что помню из института:

1) Пробежать с 0 по 2 элемент, найти Hmax
2) Присвоить H0=Hmax, H1=Hmax, H2=Hmax,
3) Берем следующие 3 элемента и повторяем цикл

:-) а вот с синтаксисом буду большие проблемы

p.s. возможно есть и более элегантное решение

[jsnb]

Так? http://learn.javascript.ru/play/hPVOrc
Ну, или приведите конкретную верстку, а там посмотрим.

[airy]

Да, спасибо. Это то что нужно. Все работает.
Вынес скрипт в отдельный файл:

function lineIt(massiv) {
var divs = $(massiv);
while (divs.length > 0) {
var row = $(divs.splice(0, 3));
var rowHeightArr = row.map(function(){ return $(this).outerHeight(); }).get();
var maxHeight = Math.max.apply(0, rowHeightArr);
row.height(maxHeight);
}
}
$(document).ready(function() {
lineIt($(".box-product > div"));
});

Это будет наглостью но спрошу,
как подправить функцию чтобы, передавать в нее не сами блоки,
над которыми совершаются действия, а их родительский блок?
У меня это ".box-content"

[Aetae]

http://chikuyonok.ru/2011/04/inline-vertical-align/
И никакого js.

[airy]

И это тоже работает, спасибо.
В первую очередь искал именно такой способ, без js.
(Правда придётся под него сейчас несколько шаблонов править.)

Спасибо еще раз.

[jsnb]

как подправить функцию чтобы, передавать в нее не сами блоки, над которыми совершаются действия, а их родительский блок?
У меня это ".box-content"

Так? http://learn.javascript.ru/play/oly3Tb
Или имеется ввиду что таких .box-content несколько на странице и для каждого надо сделать выравнивание?

[airy]

Да, .box-content несколько на странице. В каждом может быть разное (не кратное 3) выравниваемых блоков.

И у .box-content нет дополнительных уникальных идентификаторов.

Второй вариант вашей функции отлично справляется, но как вы уже поняли, она выравнивает каждые три встречающихся на странице блока, в независимости в одном ли .box-content эти блоки расположены.

Спасибо, что помогаете

[jsnb]

Второй вариант вашей функции отлично справляется, но как вы уже поняли, она выравнивает каждые три встречающихся на странице блока, в независимости в одном ли .box-content эти блоки расположены.)

Ну так прогнать функцию для каждого .box-content по отдельности:
Что-то типо этого:

$('.box-content').each( function() { lineIt( $(this) ) } )

[airy]

Да, все заработало, спасибо.
Вы очень помогли