javascript - 根据浏览器宽度通过平滑过渡更改网格中的列数

Question

我在简单的 HTML 和 CSS 网格中遇到了一个小问题。我有一个 n 个盒子的网格。它可以有任意数量的列，具体取决于浏览器或其父宽度。

将 display 应用于 inline-block 非常简单，如下例所示:

ul {
    list-style: none;
}

ul li {
    width: 100px;
    height: 100px;
    display: inline-block;
    background: #f00;
}​

参见 http://jsfiddle.net/2nscQ/

但是当有人改变浏览器的宽度时，我希望列数能够平滑过渡地改变。 CSS 有可能吗？或者是否有一个好的 jQuery 插件或技巧？

示例:http://www.squarespace.com/templates/

我正在寻找一个非常简单和小型的解决方案。因为我不能为那个小东西添加一个完整的库。我已经在我的应用程序中使用 jQuery。所以如果 CSS 和 jQuery 可行的话。那太好了。

Answer 1

当然只用CSS3's column-width属性来设置列的宽度(大概它将以 em 为单位而不是 px)并且只将所有 li 元素放在一个设置了列宽的容器？

w3schools 示例在我调整浏览器窗口大小时平滑地更改列数。