垂直和水平潜水定位

Question

有没有这样定位div的方法：

|----------||----------||----------||----------|
|  div1    ||   div5   ||          ||   div10  |
|----------||----------||   div7   ||----------|
|  div2    ||          ||          ||   div11  |
|----------||   div6   ||----------||----------|
|  div3    ||          ||   div8   ||   div12  |
|----------||          ||----------||----------|
|  div4    ||          ||   div9   ||   div13  |
|----------||----------||----------||----------|

所以我想做的是有一个水平扩展的布局，它不是垂直滚动的，它只是用垂直的空间填充它，然后水平移动。因此，第一个元素位于右上方，第二个元素位于下方，第三个元素也位于下方，直到没有剩余空间，然后返回顶部（如div5）。

Answer 1

您应该了解一下蓝图CSS框架。我用它创建了一个与你的帖子布局相似的网站，它非常容易使用，速度也很快。

http://www.blueprintcss.org/

Answer 2

这是垂直等效于浮动元素在容器中水平流动的方式（就好像支持float:top一样）。

正如@MarcB所指出的，在未来，这将很容易在CSS3专栏中实现。该标准尚未完全定义，但可能看起来如下：

.container {
    height: 200px;
    column-width: 100px;
    column-gap: 10px;
    column-fill: auto;
}

同时，jQuery插件可能是最好的选择。例如，jQueryMasonry有一列格式可能会起到作用。可能有更简单的jQuery插件也足够了。

相关搜索词：jQuery，CSS列、多列布局和平铺布局马赛克布局