垂直和水平定位的Div

Question

有没有一种方式可以像这样定位 div 元素：

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

我想要一个水平扩展的布局，不会垂直滚动，它只是填充垂直空间，然后水平移动。第一个元素放在右上角，第二个元素放在其下方，第三个元素也是如此，直到没有空间为止，然后回到顶部（例如div5）。

- Luk

---

你需要的是CSS列，这在CSS3中得到了支持，但尚未标准化。 - Marc B

你需要编写一个漂亮的自定义Javascript来完成这个任务。使用jQuery会更加容易。 - Francis Kim

Answer 1

你应该看一下蓝图CSS框架。我曾经用它创建了一个类似于你的文章布局的网站，它非常易于使用，速度也很快。

http://www.blueprintcss.org/

- cosmicsafari

Answer 2

这是垂直方向上的等价物，类似于浮动元素在容器中水平流动（就像支持float:top一样）。

正如@MarcB所指出的那样，在未来，这将很容易通过CSS3列实现。标准尚未完全定义，但可能看起来像以下内容：

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

与此同时，jQuery插件可能是最好的选择。例如，jQuery Masonry具有单列格式，可能会起到作用。可能还有更简单的jQuery插件也足够使用。

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

- Matt Coughlin