Question

我正在尝试为网站创建流畅且灵活的“图块”，该图块跨越浏览器的100％视口。但是，如果下一个瓷砖不合适，我希望它们可以根据需要缩小所有空白区域。

一个普通的div标签，最小宽度为＆amp; min-height为200px，设置为“display：inline-block”让我大部分时间都可以。当我展开浏览器窗口时，如果有另一个空间，那么这些框将向上移动到顶行。

我的问题是当下一个div没有空间时，右边有空格。而不是那样，我希望每个div“向上扩展”以固定线条的整个宽度。

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

很抱歉，如果这很难理解。从本质上讲，我试图模仿http://pulse.me如何展示他们的文章。

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

Answer 1

对于纯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/

流畅，灵活且可缩放的瓷砖，可填充视口的整个宽度

1 个答案: