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