javascript - jQuery 根据屏幕分辨率对齐表格(行数/单元格数)

标签 javascript jquery html css tabular

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

最佳答案

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

关于javascript - jQuery 根据屏幕分辨率对齐表格(行数/单元格数),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3225918/

相关文章:

javascript - 如何将 Vue.js 前端与 java 后端连接起来?

javascript - 在 FullCalendar 的 Dayclick 事件上触发 jQuery qTip,然后使用其中的按钮创建事件

javascript - 方法未在 backbone.js + coffeescript 上定义

jquery - 如何以单独的列格式显示 AJAX 响应值?

javascript - 我无法将 css 文件连接到 node.js 服务器上的 html 文件

javascript - 如何使用 calc() CSS 计算中间 div(3 div) 的高度

javascript - 尽管未显示 div,.js 文件是否应用两次?

javascript - async.auto 结果对象应该有一个值,但有一个包含两个值的数组

Javascript 函数 Number.parseLocale 当有负数时返回 NaN

javascript - 使用 Bacon.js 在延迟为 "pending"时禁用提交按钮