四列布局的问题CSS

我很难把它写成单词。因此，作为一个例子，这就是我要完成的：现在四列布局的问题CSS

http://appono.tumblr.com

，在话：我希望有在高度变化的div四列布局。在上面的例子中，div的宽度都是一样的，但它们的高度是不同的，divs可以填补空白，没有问题。不过，我试图用简单的花车向左来实现这一点，失败：

的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; 
}

哪有我完成了我所追求的目标？

来源

2013-11-23 Iohannes

AFAIK，你不能这样做只有CSS，你需要javascript。

而且它似乎是一个好的图书馆，它为你做的是Masonry。

在你的情况下，使用类似

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

Demo

见list of options实现你期望的行为。

来源

2013-11-23 01:18:36 Oriol

繁荣。正是我在找什么。谢谢。 – Iohannes