[英]jQuery align table (number of rows/cells) based on screen resolution
I have a table like this (8 cells only for illustrative purposes, may be more or less): 我有一个这样的表(8个单元格仅用于说明目的,可能或多或少):
[1] [2] [3] [4]
[5] [6] [7] [8]
Each item in each cell is roughly 450px wide, so they fit comfortably next to each other on a 1920x1200 screen (which, incidentially, is mine). 每个单元格中的每个项目大约为450像素宽,因此在1920x1200屏幕(顺便说一下,这是我的)上,它们可以舒适地挨在一起。 However, I need this configuration to change automatically and align the best possible way in case somebody with a smaller (or wider) screen resolution comes along, or resizes the browser window.
但是,我需要自动更改此配置并以最佳方式对齐,以防出现屏幕分辨率较小(或更宽)的人,或者调整浏览器窗口的大小。
So, for 1024x768 it would be: 因此,对于1024x768,它将是:
[1] [2]
[3] [4]
(etc)
and for 2560x1600 it would be: 对于2560x1600,它将是:
[1] [2] [3] [4] [5]
[6] [7] [8] [9] [10]
(etc)
How can I do something like this - maybe with jQuery or CSS? 我该怎么做-可能是jQuery或CSS?
I searched and just found by myself 我搜寻了自己才发现
Don't use "table", use "div, with style attribute set to "float: left" for each div... and set width and height of your blocks, it will work, like this : 请勿使用“表格”,而应使用“ 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>
And try to resize your page for example. 并尝试例如调整页面大小。
Hope it will helps someone other. 希望它会帮助别人。
Cerdan 切尔丹
Instead of using a table use an unordered list. 代替使用表,使用无序列表。 Ensure that the width of the unordered list itself (or perhaps its container) is a percentage width (it will scale to the size of the browser window).
确保无序列表本身(或它的容器)的宽度是百分比宽度(它将缩放到浏览器窗口的大小)。 Float each of the
<li>
elements and specify a width if you want them equal size. 浮动每个
<li>
元素,如果希望它们的大小相等,则指定宽度。 The browser will do the rest for you. 浏览器将为您完成其余的工作。
Example: 例:
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 */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.