3

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

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

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

4

2 回答 2

0

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

http://www.blueprintcss.org/

于 2013-02-18T23:03:53.660 回答
-1

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

正如@MarcB 所指出的，将来这将通过CSS3 columns轻松实现。该标准尚未完全定义，但可能类似于以下内容：

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

同时，jQuery 插件可能是最好的选择。例如，jQuery Masonry 具有一列格式，可以解决问题。可能有更简单的 jQuery 插件也足够了。

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

于 2013-02-19T02:00:19.900 回答