jQuery выровнять таблицу (количество строк / ячеек) в зависимости от разрешения экрана - PullRequest
Новая
       1

jQuery выровнять таблицу (количество строк / ячеек) в зависимости от разрешения экрана

1 голос
/ 12 июля 2010

У меня есть такая таблица (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?

Ответы [ 2 ]

0 голосов
/ 11 марта 2013

Я искал и только что нашел сам

Не используйте "table", используйте "div, с атрибутом стиля, установленным в" float: left "для каждого 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>
<div style=\"width: 100px; height: 100px; float: left\">CONTENT</div>

И попробуйте изменить размер вашей страницы, например.

Надеюсь, это поможет кому-то другому.

Сердан

0 голосов
/ 12 июля 2010

Вместо использования таблицы используйте неупорядоченный список. Убедитесь, что ширина самого неупорядоченного списка (или, возможно, его контейнера) является процентной шириной (она будет масштабироваться до размера окна браузера). Плавающий каждый из элементов <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 */
...