jQuery的对准表（行/细胞数）

我有这样的表（8个细胞仅用于说明的目的，可以存在更多或更少）：jQuery的对准表（行/细胞数）

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

在每个小区中的每个项目宽度大约为450px，因此它们在1920x1200屏幕上相互舒适地相邻（这在我的意义上是我的）。但是，我需要这种配置来自动更改并调整最佳方式，以防出现具有较小（或较宽）屏幕分辨率的人或调整浏览器窗口大小。

因此，对于1024×768这将是：

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

和2560×1600这将是：

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

我怎样才能做这样的事情 - 也许与jQuery或CSS？

来源

2010-07-12 Alex

你可能会看看谷歌是如何做到的 - 如果你检查他们的图片搜索源，你会看到他们是这么做的。虽然他们的JS不是最易读的，但你也许可以用JS调试器来获得一些东西 – Mala 2010-07-12 04:53:45

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

来源

2010-07-12 04:47:47

我搜索，只是我发现

不要使用“表”，使用“分区，设置样式属性‘浮法：左’每个格。 ..并设置宽度和你的块的高度，它会工作，像这样：

<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

来源

2013-03-11 03:22:08 user1773370

jQuery的对准表（行/细胞数）

回答

相关问题