Question

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

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

每个单元格中的每个项目大约为450px宽，因此它们在1920x1200屏幕上非常舒适地贴合在一起（这在我看来很明显）。但是，我需要这个配置自动更改，并在屏幕分辨率较小（或更宽）的人出现时调整最佳方式，或者调整浏览器窗口的大小。

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

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

对于2560x1600，它将是：

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

我怎么能做这样的事情 - 可能用jQuery或CSS？

Answer 1

使用无序列表而不是使用表。确保无序列表本身（或可能是其容器）的宽度是百分比宽度（它将缩放到浏览器窗口的大小）。浮动每个<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 */

Answer 2

我自己搜索并找到了

不要使用“table”，使用“div，将style属性设置为”float：left“为每个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>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>

并尝试调整页面大小。

希望它会帮助其他人。

Cerdan的

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

2 个答案: