1

我有一个这样的表格(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?

4

2 回答 2

0

不要使用表,而是使用无序列表。确保无序列表本身(或者它的容器)的宽度是百分比宽度(它将缩放到浏览器窗口的大小)。浮动每个<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-12T04:47:47.600 回答
0

我自己搜索了一下才找到

不要使用“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>

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

希望它会帮助别人。

塞尔丹

于 2013-03-11T03:22:08.023 回答