提问人：Control Freak 提问时间：5/10/2013 最后编辑：CommunityControl Freak 更新时间：11/16/2016 访问量：3492
使用 CSS 的引脚板效果 [已关闭]
Pin-board effect with CSS [closed]
问：
看看这把小提琴
我希望 div 更高，这样它更接近 div ，但边距完好无损，有点像 Pinterest 插板风格的布局，有人知道如何做到这一点吗？41
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
我想要的是 j08691 在下面的答案中提供的类似此链接的内容。
答：
2赞
j08691
5/10/2013
#1
你可以使用 JavaScript 来实现这一点，但不能单独使用 CSS 浮点数来完成。像 jQuery 砌体这样的库可以很好地做到这一点。原因是什么？浮标的规格。特别是 #5，它说：“浮动框的外顶部不得高于源文档中较早的元素生成的任何块或浮动框的外顶部。
评论
0赞
jpganz18
5/10/2013
我同意，我认为你应该阅读更多关于制作REST设计的信息（我认为这就是你想去的地方）
0赞
filipko
5/10/2013
#2
您可以每隔一个 div 向右浮动一次：
div:nth-child(even) {
float: right;
}
3赞
Mathijs Flietstra
5/10/2013
#3
您可以在大多数当前使用CSS多列布局的浏览器中执行类似Pinterest布局的操作，它将在IE9和旧版本中中断。
这是一个 .我添加了更多div用于演示目的。jsFiddle
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;
}
正文的宽度设置为 ，该值当前派生自 div 宽度的两倍 + 列间隙的宽度，您可以使用此值和列间隙值来增加或多或少的 div 列之间的空间。420px
如果你需要支持较旧的浏览器，你可以看看 Columnizer jQuery 插件。
评论
0赞
Mukus
7/26/2016
怎么会有 11 张反对票和 2 张赞成票的正确答案？SO 没有意义。
评论