html - 创建响应式表格布局

Question

完成以下任务的最有效方法是什么:

当页面以 1920 x 1024 加载时，页面会显示一整页图像，所有图像均等间隔 324 像素宽，如下所示:

[]  []  []
[]  []  []
[]  []  []
[]  []  []

现在，当我调整浏览器大小时，我想更改它并让图像 2 乘 2，最终乘以 1，如下所示:

  [] []
  [] []
  [] []
  [] []

然后按 1

   []
   []
   []
   []

我将使用分页功能来翻到下一页，但我正在尝试找出实现此目的的最有效方法，该方法将与跨浏览器兼容。

我的想法是为每个图像设置 div，然后按照 1、2 和 3 的顺序为每个 div 分配 3 个类。

然后当浏览器调整大小时，有一个 JS 函数为每个元素指定适当的类。

方案二(我觉得稍微好一点):

将所有 div float 到左侧并使用媒体查询设置它们的宽度。

是否有更有效的方法来完成此任务？

Answer 1

媒体查询将是您最好的选择。您可以用一个容器 div 包围您的图像，然后在针对给定 min-width 屏幕尺寸的每个媒体查询中，设置容器 div 的宽度。这些图像只需要应用 float: left; CSS，它们就会在容器 div 中流动。

如果您想在每个屏幕宽度中强制设置列数并最大化使用的空间，您甚至可以更进一步。将每个图像本身包装在包装 div 中，然后在最大屏幕尺寸的媒体查询中，将该包装 div 的宽度设置为 33% 以获得 3 列。在两栏场景下，将宽度设置为50%，最后在单栏场景下，将宽度设置为100%。然后将 float: left; 应用于单个图像的包装器 div。