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

Question

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

[1] [2] [3] [4]
[5] [6] [7] [8]

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

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

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

对于2560x1600，它将是：

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

我该怎么做-可能是jQuery或CSS？

Answer 1

我搜寻了自己才发现

请勿使用“表格”，而应使用“ 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>

并尝试例如调整页面大小。

希望它会帮助别人。

切尔丹

Answer 2

代替使用表，使用无序列表。 确保无序列表本身（或它的容器）的宽度是百分比宽度（它将缩放到浏览器窗口的大小）。 浮动每个<li>元素，如果希望它们的大小相等，则指定宽度。 浏览器将为您完成其余的工作。

例：

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 */