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