液体网格 - 人们如何引用它

Question

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

任何人都可以告诉我这项技术的名称是什么，所以我可以找到一些教程。对于奖励积分，它需要javascript吗？

Answer 1

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

Zoe Mickley Gillenwater

"70+ essential resources for creating liquid and elastic layouts"

Answer 2

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

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

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

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

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

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

Answer 3

你正在寻找它所谓的流体（或可伸缩，液体等）“瓷砖”比“网格”更好

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