Моя попытка Pinterest HTML

Question

Я написал несколько html для создания блоков текста/изображений, похожих на Pinterest. Я попытался использовать «float: left», чтобы создать 3 столбца плитки, но выравнивание просто неверно.

http://jsfiddle.net/cme0848/zran44vr/6/

.tb-box{ 
    font-family: 'Ubuntu', sans-serif; 
    width:245px; 
    border-radius:5px; 
    background-color:#f3f3f5; 
    float:left; 
    margin-right:5px; 
    text-align:center; 
    margin-bottom:5px; 
} 

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

~ Craig

Answer 1

По словам коллеги, этот тип стайлинга не представляется возможным в CSS с использованием современных стандартов W3C. Мне нужно будет изменить код, чтобы использовать jquery.

Это в основном то, что я искал. Simple Jquery Plugin. Легкая и гибкая реализация сетки стиля пинтреста. Все, что мне нужно было сделать, это вставить мои DIV внутри тегов в представленном им примере HTML.