流体，灵活和可扩展的瓷砖填充整个宽度的视口 [英] Fluid, flexible and scalable tiles to fill entire width of viewport

问题描述

我试图为网站创建流畅和灵活的磁贴，跨越浏览器的100％视口。但是，如果下一个tile不合适，我希望它们缩小一些，以便消除所有的空白区域。

I am trying to create fluid and flexible "tiles" for a website, that span across 100% of the viewport of the browser. However, I would like them to scale a bit if needed to eliminate all white space if a the next tile doesn't fit.

一个正常的div标签，宽度& min-height为200px，设置为display：inline-block让我最大的方式。当我展开浏览器窗口时，如果存在另一个空间，框会向上移动到顶行。

A normal div tag with a min-width & min-height of 200px, set to "display: inline-block" gets me most of the way. As I expand the browser window, the boxes will move up to the top line if there is room for another.

我的问题是当没有下一个div，右边有空格。而不是这样，我想让每个div扩大来修复行的整个宽度。

My problem is when there isn't room for the next div, there is whitespace on the right. Instead of that, I want each div to 'scale up' to fix the full width of the line.

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

So if the browser was set to 675px, instead of having 3 divs at 200px, there would be 3 at 225px. But if you then resize the browser to 800px, then there would be 4 divs of 200px.

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

Sorry if that is hard to understand. Essentially, I am trying to mimic how http://pulse.me displays their articles.

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

I would like to do this in pure CSS if at all possible, but I suspect for the window resize at least, some javascript will be needed. Any thoughts?

推荐答案

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

For a pure-CSS approach, you can use media queries combined with percentage widths:

.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/

这篇关于流体，灵活和可扩展的瓷砖填充整个宽度的视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！