事业部定位垂直和水平

Question

有没有一种方法来定位DIV是这样的：

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

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

Answer 1

这是垂直相当于浮动元素如何在容器中水平流动（如如果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列，多栏布局，平铺布局，的镶嵌布局，你想要什么是CSS列，

Answer 2

你应该看看蓝图CSS框架。我用它来创建一个网站，它与你的帖子有相似的布局，它的使用非常简单，速度也很快。

http://www.blueprintcss.org/