Question

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

当页面加载到1920 x 1024时，页面显示整页图像，均匀间隔324像素宽，每个像这样：

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

现在，当我调整浏览器大小时，我想更改此设置，并将图像逐个2并且最终由1＆1 39进行处理：

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

然后由1＆＃39>

   []
   []
   []
   []

我将有一个分页翻到下一页，但我想找出最有效的方法来实现这个兼容交叉浏览器。

我的想法是为每个图像设置div，然后为每个div分配3个类，沿着1,2和3行。

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

选项2（我觉得稍好一些）：

将所有div浮动到左侧并使用媒体查询来设置其宽度。

这是更有效的方法吗？

Answer 1

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

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

Answer 2

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

只有预感是你必须实现Bootstrap Framework -

创建响应式表格布局

2 个答案: