Динамические, Табличные строки элементов списка с использованием CSS и jQuery

Question

У меня есть список элементов контента, каждый из которых имеет заданную ширину, но отличается (переменной) высотами. Каждый элемент в списке будет размещен слева. HTML и CSS следующим образом:

<style type="text/css"> 
    li{ 
    float: left; 
    width: 200px; 
    } 
    li img{ 
    float: right; 
    } 
</style> 

<ul> 
    <li><h3>Item One</h3> 
     <img src="one.png"> 
     <p>First item content here</p> 
    </li> 
    <li><h3>Item Two</h3> 
     <img src="two.png"> 
     <p>Second item content here</p> 
    </li> 
    <li><h3>Item Three</h3> 
     <img src="three.png"> 
     <p>Third item content here</p> 
    </li> 
    <li><h3>Item Four</h3> 
     <img src="four.png"> 
     <p>Fourth item content here</p> 
    </li> 
    <li><h3>Item Five</h3> 
     <img src="five.png"> 
     <p>Fifth item content here</p> 
    </li> 
</ul> 
</style> 

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

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

Я хотел бы также, чтобы иметь возможность масштабировать ширину контейнера DIV таким образом, что элементы-в-строке при необходимости отрегулировать , Например, если содержащий div div становится шире (т. Е. Если пользователь изменяет размеры окна), количество элементов в строке увеличивается, чтобы заполнить пробел. Вот пример соответствующей задачи на более широком контейнере:

И вот что я хочу, чтобы это сделать:

Основываясь на предыдущий вопрос, я не» t думаю, что есть простое решение для этого, поэтому я хочу использовать jQuery, чтобы это сделать.

То, что я имею в виду использует JQuery, чтобы сделать что-то вроде:

Шаг 1. Установить ширину каждого элемента elementWidth

var elementWidth = 200; // 200px 

Шаг 2. Установить переменную containerWidth к ширине общего контейнера

var containerWidth = $('#container').width(); 

Шаг 3. Разделите containerWidth по elementWidth, чтобы определить количество элементов в строке

var elementsPerRow = containerWidth/elementWidth; 

Шаг 4. Добавьте свойство ясно: слева; каждый elementsPerRow -ith элемент списка

for(x = 0, x < (total number of all elements), x + elementsPerRow){ 
    // set clear:left to this <li> 
} 

Я не очень хорошо (начинающий) с JavaScript и JQuery. Может кто-то, пожалуйста, помогите мне собрать это вместе в хороший фрагмент кода, который я могу скопировать и вставить (и узнать).

Спасибо!

Answer 1

Проблема в том, что вы пытаетесь использовать float: left, когда вы должны использовать display: inline-block. Также не нужно использовать javascript.

li { 
    vertical-align: top; 
    display: inline-block; } 

См: http://jsfiddle.net/Wexcode/zgNkA/