Javascript jQuery根据屏幕分辨率对齐表（行数/单元格数）

我有这样一个表格（8个单元格仅用于说明目的，可能或多或少）：

每个单元中的每个项目大约450像素宽，因此它们可以在1920x1200屏幕上舒适地挨在一起（顺便说一句，这是我的）。但是，我需要自动更改此配置并以最佳方式对齐，以防出现屏幕分辨率更小（或更宽）的用户，或调整浏览器窗口的大小

因此，对于1024x768，它将是：

[1] [2]
[3] [4]
(etc)

[1] [2] [3] [4] [5]
[6] [7] [8] [9] [10]
(etc)

对于2560x1600，它将是：

[1] [2]
[3] [4]
(etc)

[1] [2] [3] [4] [5]
[6] [7] [8] [9] [10]
(etc)

---

我怎样才能做到这一点？也许可以使用jQuery或CSS？

而不是使用表，而是使用无序列表。确保无序列表本身（或其容器）的宽度为百分比宽度（它将缩放到浏览器窗口的大小）。浮动每个

元素，如果希望它们的大小相等，请指定宽度。浏览器将为您完成其余工作

例如：

HTML:
<ul id="mydata">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

CSS:
ul#mydata { width: 90%; }
  ul#mydata li { width: 450px; float: left; } /* Don't *have* to specify width */

HTML：

一,
二,
三,

CSS:
ul#mydata{宽度：90%；}
ul#mydata li{width:450px；float:left；}/*不必*指定宽度*/

我自己搜索了一下才找到

不要使用“table”，使用“div”，将每个div的样式属性设置为“float:left…”并设置块的宽度和高度，它将工作，如下所示：

<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>

内容
内容
内容
内容
内容
内容

例如，尝试调整页面大小

希望它能帮助别人

---

Cerdan

你可以看看谷歌是如何做到的——如果你检查一下他们的图像搜索源，你会发现他们就是这么做的。虽然他们的JS不是最可读的，但你可以通过JS调试器从中获得一些东西