Проблема с четырьмя компоновками столбцов CSS

Question

У меня возникли проблемы с помещением в слова. Так как, например, это то, что я пытаюсь выполнить:

http://appono.tumblr.com

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

http://jsfiddle.net/Ha32Q/

HTML, (случайный неаккуратно пример)

<div class="wrapper"> 
    <div class="content"> 
     <div class="smexy"> 
      <h3>ASD SADA N SAD AD AS D ASD A SD ADWW AD W AD AS Ds D WD D AWD W D WAD AW AD WA D SADAS F AFW A F WAF AS F</h3> 
     </div> 
     <div class="smexy"> 
      <h3>Why Hello</h3> 
     </div> 
     <div class="smexy"> 
      <h3>LOREM IPSUM DOLOR I AM TYPIING THIS FROM MEMORY OKAY THANKS GOODBYE HAVE A NICE DAY</h3> 
     </div> 
     <div class="smexy"> 
      <p>Lolwut</p> 
     </div> 
     <div class="smexy"> 
      <h3>Yo WHY HELLO DAR</h3> 
     </div> 
    </div> 
</div> 

CSS-

.smexy { 
    float:left; 
    position:relative; 
    width:25%; 
    background:#d2d2d2; 
    margin:5px; 
    padding:0; 
} 

Как может Я выполняю то, на что я нацелен?

Answer 1

AFAIK, вы не можете сделать это CSS только, вам нужен javascript.

И кажется, что хорошая библиотека, которая делает это для вас, - Masonry.

В вашем случае использовать что-то вроде

var container = document.querySelector('.wrapper'); 
var msnry = new Masonry(container, { 
    // options 
    columnWidth: 200, 
    itemSelector: '.smexy' 
}); 

Demo

Смотрите list of options для достижения желаемого поведения.

Answer 2

Если вы ищете эффект, поскольку сайт, который вы только что использовали, используйте подключаемый модуль, который они использовали. :) То, что вы пытаетесь выполнить, не может быть выполнено с помощью CSS. Плавающий не работает таким образом - если вы не создадите 3 .content столбцов и загрузите DIVs в столбцах .smexy. Подумайте больше вертикально и горизонтально. Вы копаете? :)

Вот плагин: (? Smexy-Несс)

http://masonry.desandro.com/

Тогда посмотрите на это сексапильности: http://tympanus.net/Development/GridLoadingEffects/index2.html

Answer 3

Кладка велик, есть взгляд на Isotope тоже , У меня был хороший опыт в этой области.