创建响应式表格布局

Question

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

当页面加载为1920 x 1024时，页面显示一整页图像，每个图像的宽度均为324 px，如下所示：

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

现在，当我调整浏览器的大小时，我想要改变这一点，使图像由2到2，最终到1，如下所示：

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

然后是1

   []
   []
   []
   []

我将使用分页来翻到下一页，但我正在尝试找出实现这一点的最有效的方法，即跨浏览器兼容。

我的想法是让每个图像都有div，然后按照1、2和3这条线为每个div分配3个类。

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

选项2(我觉得稍微好一点)：

将所有div向左浮动，并使用媒体查询来设置它们的宽度。

are是不是实现这一点的更有效的方法？

Answer 1

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

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

Answer 2

这可能非常有帮助-- http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table

唯一的预感是你必须实现Bootstrap框架-