Div сторона выравнивание по вопросу сторона высота

Question

Я выложив изображения продукта внутри DIV с помощью:

<div> 
     <img src="imgs/1.jpg" /> 
     <h3>Flowers Bunch</h3> 
     <span>Rs 500</span> 
</div> 

Эти дивы возникли поплавок установлен слева, так что они присоединяются бок о бок в зависимости от ширины, которая доступна. Таким образом, могут быть представлены 2, 3 или 4 продукта, которые будут отображаться бок о бок подряд.

Проблема в том, что если один из div занимает больше высоты, чем другие в той же строке, то в следующей строке пространство ниже div, высота которого была расширена, не используется и остается пустой. Как решить проблему?

Answer 1

У вас есть несколько вариантов.

1) Вы можете установить минимальную высоту для элементов, если вы уверены, что они не будут превышать это значение.

2) Вы можете использовать div с положение: относительное; переполнение: скрыто; для каждой строки

3) Вы можете создать элемент clearfix и добавить его после каждой строки.

.clearfix { clear: both; font-size: 0; line-height: 0; text-indent: 9999; } 

Answer 2

Другое решение (только с использованием фиксированных высот, вероятно, будет самым легким), чтобы использовать что-то вроде jQuery Masonry, с конечным результатом, глядя что-то вроде этого: