div 垂直和水平定位答案

【问题标题】：Div positioning vertically and horizontallydiv 垂直和水平定位
【发布时间】：2013-02-18 22:17:37
【问题描述】：

有没有办法像这样定位div：

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

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

【问题讨论】：

你想要的是 css 列，CSS3 支持，但尚未标准化。
您需要编写一个非常自定义的 Javascript 来执行此操作。 jQuery 会让它变得更容易。

标签： html css horizontal-scrolling

【解决方案1】：

您应该看看蓝图 CSS 框架。我已经使用它创建了一个与您的帖子具有相似布局的网站，它非常易于使用且速度也很快。

http://www.blueprintcss.org/

【讨论】：

【解决方案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 列、多列布局、平铺布局、马赛克布局

【讨论】：