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

我一直在玩谷歌应用程序控制台，它有一个流动的页面，其中有网格的项目。当用户使窗口越来越大，网格项的宽度越来越小，直到它无法使每个网格项变小时，将一个网格项放到下一行

有谁能告诉我这项技术叫什么，这样我就可以找到一些教程了。对于奖励积分，它需要javascript吗

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

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

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

编辑：这里是jsfiddle

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

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

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

---

编辑：这里是JSFIDLE

您正在寻找的东西，它被称为流体（或可伸缩、流体等），“瓷砖”优于“网格”

---

如果您只想使用CSS，那么这个问题可能会解决您的问题：

您需要的是流体（或可伸缩、流体等），“瓷砖”比“网格”更好

---

如果您只想使用CSS，这个问题可能会解决您的问题：

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

---

Zoe Mickley Gillenwater

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

佐伊·米克利·吉伦沃特

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

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