html - 像 pintrest.com 上那样的 float DIV

Question

我有个小问题。我在一个绝对定位的包装器 div 中有多个相对定位的 DIV。现在我希望它们像在 pintrest.com 上一样。但我的结果是这样的:

http://d.pr/CHCq(图片链接在 droplr.com 上)

CSS:

div.post {
position: relative;
width: 250px;
margin: 0 0px 14px 14px;
background-color: #eae9e9;
float: left;
}

您知道对此有什么有效的解决方法吗？还是我应该制作三列？提前致谢。

Answer 1

您需要使用 DIV 或 TABLE 将它们拆分成列，然后确保在列容器上设置了“vertical-align: top”。

float 不会执行您想要的操作，也不会显示:inline-block。

一种替代方法是将所有框的高度设置为相等，然后使用“display: inline-block”而不是 float。