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 columns。该标准尚未完全定义，但可能如下所示：

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

与此同时，jQuery插件可能是最好的选择。例如，jQuery Masonry有one-column formatting可以做到这一点。可能有更简单的jQuery插件，这也是足够的。

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

Div垂直和水平定位

2 个答案: