Я хочу создать сетку «системы показателей» для вывода некоторые данные. Если данные в каждом элементе div.item имеют одинаковую высоту, то простой элемент с плавающей запятой, оставленный на каждом элементе div.item, дает красивый равномерный макет, который хорошо масштабируется вверх и вниз в зависимости от размера браузера.

Если же данные являются переменными, то есть разное количество строк в каждом блоке div, то способ плавания элементов дает неровный и беспорядочный вывод. См. Пример кода ниже. Если вы создаете страницу, как показано ниже, измените размер браузера примерно до 800 пикселей в ширину, чтобы поля 1, 2 и 3 образовали «строку» сверху, за которой следуют 4, 5 и 6.Как мне заставить 7 перейти к следующей строке, чтобы она создавала строку вместе с 8 и 9?

Очевидно, если вы измените размер браузера так, чтобы в каждой строке отображалось 4 div, номер 9 - это элемент, который я хочу разбить ниже 5. Есть ли что-то очевидное, чего мне не хватает, или мне нужно использовать Javascript для этого?

 div.item {float: left; ширина: 220 пикселей; цвет фона: #DBDBDB; маржа: 8 пикселей; } h1, p {padding: 4px; маржа: 0; } 

 
 
 1 
 
 Контент 
 
 Контент 
 
 Контент 
 
 
 
 2 
 
 Content 
 
 Content 
 
 Content 
 
 
 
 3 
 
 Контент 
 
 Контент 
 
 Контент