-14

看看这个小提琴

我希望 div4更高，因此它更接近 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; }

Div4不像其他人那样紧密地适合。有关详细信息，请参阅小提琴。

我想要的是类似于j08691 在下面的答案中提供的链接。

4

3 回答 3

2

您可以使用 JavaScript 来完成此操作，但不能仅使用 CSS 浮动来完成。像jQuery masonry这样的库会做得很好。原因？花车的规格。特别是#5，它说：“浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。”。

于 2013-05-09T23:36:54.630 回答
2

您可以使用CSS 多列布局在大多数当前浏览器中执行类似 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 插件。

于 2013-05-10T01:37:52.647 回答
0

您可以每隔一个 div 向右浮动：

div:nth-child(even) {
    float: right;
}
于 2013-05-09T23:39:53.007 回答