1

我正在尝试为网站创建流畅且灵活的“图块”，跨越浏览器的 100% 视口。但是，如果下一个图块不适合，我希望它们在需要时缩小一点以消除所有空白。

一个最小宽度和最小高度为 200 像素的普通 div 标签，设置为“显示：内联块”让我大部分时间。当我展开浏览器窗口时，如果还有空间，这些框将向上移动到顶行。

我的问题是当下一个 div 没有空间时，右边有空格。取而代之的是，我希望每个 div 都“放大”以固定线条的整个宽度。

因此，如果浏览器设置为 675px，而不是在 200px 处有 3 个 div，在 225px 处将有 3 个。但是，如果您随后将浏览器的大小调整为 800 像素，那么将有 4 个 200 像素的 div。

对不起，如果这很难理解。本质上，我试图模仿http://pulse.me如何显示他们的文章。

如果可能的话，我想在纯 CSS 中执行此操作，但我怀疑至少要调整窗口大小，需要一些 javascript。有什么想法吗？

4

1 回答 1

4

对于纯 CSS 方法，您可以使用结合百分比宽度的媒体查询：

.tile {
    /* 4 tiles per row */
    width: 25%;
}

@media (max-width: 500px) {
    .tile {
        /* 3 tiles per row */
        width: 33.33333333332%
    }
}

@media (max-width: 300px) {
    .tile {
        /* 2 tiles per row */
        width: 50%
    }
}

这是一个证明这一点的小提琴：http: //jsfiddle.net/bDBMP/1/

于 2013-03-24T05:37:54.310 回答