Какой объект использовать в HTML-коде, чтобы получить "резиновую" матрицу?

Веб-мастеринг

12.09.11

✎

16:01

Давно не htmlил, совсем навыки потерял.
Чего хочу. На HTML-странице есть некое двумерное Пространство: div, ячейка таблицы, что-то еще - это в принципе неважно. В нем помещено произвольное количество неких Объектов фиксированного размера, например 100х150 пикселей. Допустим, что при определенном разрешении экрана внутри Пространства может поместиться 20 объектов: 5 колонок по 4 строки. При изменении размеров Пространства (например при изменении разрешения, изменении размеров окна браузера и т.д.) Объекты уже не помещаются в 5 колонок, и они должны автоматически перегруппироваться (сразу же, "на лету"): 4 колонки и 5 строк, затем 3 колонки и 7 строк и т.д.

Именно так все и происходит, если расположить несколько картинок в одной строке: они автоматом будут переноситься на следующую строку.
Но в моем случае происходит затык. Объект - это совокупность html-тегов (то есть пространство фиксированного размера, внутри которого могут быть надписи, картинки и т.д.). Пробую использовать div - не получается: каждый новый Объект располагается с новой строки. Пробую span - все идет в одно строку и переносится, но не соблюдается высота Объекта: он ужимается до максимального вертикального размера содержимого: текста, картинки и т.д.

Какой объект и с какими параметрами лучше использовать, чтобы победить ? Можно конечно слепить таблицу, но тогда придется отслеживать размеры Пространства и самому рассчитывать количество колонок и строк, заполнять их. А это плохо: лишний код нам не нужен.

Мммм?

1 Ангел- Хоронитель

12.09.11

✎

17:27

(0)div с inline... правда на "самом правильном браузере" 5 версии затык будет.

2 Юрий Лазаренко

12.09.11

✎

20:26

(1) Пробовал. Вот текст html:

<html>
<head>
<link type="text/css" href="styles.css" rel="stylesheet">
</head>
<body>

<div class='task' name='task_300'>
Задача 300<br>
Описание задачи<br>
Текст задачи
</div>

<div class='task' name='task_321'>
Задача 321
</div>

<div class='task' name='task_800'>
Задача 800
</div>

</body>
</html>

Вот файл таблицы стилей:

div.task{border:#3b7693 1px dotted; display:inline; width:100; height:150; overflow:hidden;}

Не получается, то же самое что со span: все идет в одно строку и переносится, но не соблюдается высота. Может еще какое свойство в таблице стилей не задал?

3 boroda

14.09.11

✎

07:02

Добавь в css float:left;

4 Asmody

14.09.11

✎

07:32

inline-block
только почитай в интернетах, как его хачить надо

5 APXi

14.09.11

✎

07:33

(3) +1

6 Tashiro

14.09.11

✎

07:53

html>
<head>
<link type="text/css" href="styles.css" rel="stylesheet">
</head>
<body>

<div id="container">

<div class='task' name='task_300'>
Задача 300<br>
Описание задачи<br>
Текст задачи
</div>

<div class='task' name='task_321'>
Задача 321
</div>

<div class='task' name='task_800'>
Задача 800
</div>
<div id="clear"></div> *
</div> 
</body>
</html>

--css
#container {width: 100%; overflow: hidden *;}
div.task{border:#3b7693 1px dotted; display:block; width:100; height:150; overflow:hidden; float: left;}
div#clear {width: 100%; clear:both;}

* - чтобы container имел высоту дочерних элементов надо либо overflow: hidden, либо элемент последний в нем с очисткой потоков (можно сразу два варианта =) )

вроде как-то так

7 Tashiro

14.09.11

✎

07:57

(4) inline-block браузеры интерпретируют как текст, из-за этого можно нахвататься проблем с пробелами между строк в коде html

хак для ослика 7
display: inline-block;
*display: inline;
zoom: 1

8 Asmody

14.09.11

✎

08:30

вот похожая задача http://habrahabr.ru/blogs/webdev/75905/