與CSS

Question

針板效應看看這個fiddle

我想的div 4要高所以它更接近div的1，但隨着利潤率完好，有點像Pinterest針板風格的佈局，有誰知道這是怎麼做到的嗎？

HTML：

<div>1<br/>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 

CSS：

div { 
    display:inline-block; 
    background-color:#CCC; 
    float:left; 
    width:200px; 
    margin:10px 20px; 
} 

body { width:500px; } 

事業部4不適合舒服地休息一下就好了。詳情請參閱fiddle。

我想要的是類似this link的東西，由j08691 in an answer below提供。

Answer 1

你可以做類似的佈局Pinterest的使用CSS multi-column layoutsmost current browsers中，將在IE9和舊版本打破。

這裏是一個jsFiddle。爲了演示目的，我添加了更多div。

html, body { 
    height: 100%; 
} 
body { 
    width: 420px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    column-count: 2; 
    column-gap: 20px; 
    margin: 20px; 
} 
div { 
    display: inline-block; 
    background-color:#CCC; 
    width:200px; 
    margin-bottom: 20px; 
} 

身體的寬度設置爲420px，該值當前是從DIV +的柱間隙的寬度的兩倍的寬度得到的，你可以用這個值和列間隙值起到補充div的列之間的空間或多或少。

如果您需要支持舊瀏覽器，可以查看Columnizer jQuery Plugin。

Answer 2

您可以使用JavaScript來完成此任務，但不能單獨使用CSS浮動工具完成。像jQuery masonry這樣的圖書館會做得很好。原因？ The specs on floats。特別是＃5說：「浮動框的外部頂部可能不會高於源文檔中早期元素生成的任何塊或浮動框的外部頂部。」

Answer 3

你可以每隔第二個div浮動到右：

div:nth-child(even) { 
    float: right; 
}