Liquid Grid - 人们如何引用它答案

【问题标题】：Liquid Grid - How do people refer to itLiquid Grid - 人们如何引用它
【发布时间】：2014-03-24 00:04:04
【问题描述】：

我一直在使用谷歌应用程序控制台，它有一个流畅的页面，其中有项目网格。当用户使窗口越来越小时，网格项的宽度会越来越小，直到它不能使每个网格项变得更小时，它才会将一个放到下一行。

谁能告诉我这种技术叫什么，所以我可以找到一些教程。对于奖励积分，是否需要 javascript？

【问题讨论】：

标签： javascript html css layout

【解决方案1】：

该技术被称为液体或弹性布局。它是通过 CSS 实现的，不需要 javascript。如果您正在寻找教程，这篇文章可能对您有用：

"70+ essential resources for creating liquid and elastic layouts" by Zoe Mickley Gillenwater

【讨论】：

【解决方案2】：

最常用的方法（至少根据我的观察）是浮动 div，宽度为百分比和 css 媒体样式。示例

.thumb {
    float: left;
    width:18%;
    margin:1%; 
    background: #eee;
    height: 200px;
}

@media (max-width: 724px) {
    .thumb {
        width:48%;
    }
}

在上面的示例中，div.thumb 的宽度为 20%（边距+宽度），这意味着每行将有 5 个 div。如果视口的最大宽度为 724px，则每行将有 2 个 div。

有很多方法可以做到这一点，但这是最容易做到的，如果你的 div 有相同的高度，否则你会在浮动时出现一些故障。

编辑：这里是 jsfiddle http://jsfiddle.net/P2URP/

【讨论】：

【解决方案3】：

您正在寻找的东西称为流体（或可扩展、液体等）“瓷砖”比“网格”更好

如果你只想用 CSS 来解决这个问题，这个问题可能会解决你的问题：Fluid, flexible and scalable tiles to fill entire width of viewport

【讨论】：