四列布局的問題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