Question

看看这个fiddle

我希望div 4更高，因此它更接近div 1，但边距保持不变，有点像Pinterest pin-board样式布局，有谁知道如何这样做？

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

Div 4与其他人一样不适合。有关详细信息，请参阅fiddle。

我想要的是this link提供的j08691 in an answer below。

Answer 1

您可以使用JavaScript来完成此任务，但仅使用CSS浮点数无法完成。像jQuery masonry这样的图书馆会做得很好。原因？ The specs on floats。特别是＃5，它说：“浮动框的外部顶部可能不会高于源文档中早期元素生成的任何块或浮动框的外部顶部。”。

Answer 2

您可以使用most current browsers在CSS multi-column layouts中执行类似Pinterest布局的操作，它会在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 3

你可以向右浮动每秒div：

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

CSS引脚板效果

3 个答案: