CSS float, очистить «ряд» плавающих элементов

Question

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

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

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

div.item{
  float:left;
  width:220px;
  background-color:#DBDBDB;
  margin:8px;
}

h1, p{
  padding:4px;
  margin:0;
}

<div class='item'>
  <h1>1</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>2</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>3</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Answer 1

Изменить "float: left;" на "display: inline-block; vertical-align: top;"

и все будет работать так, как вы хотите.

Пример: http://jsfiddle.net/yK9eY/2/

div.item {
    display: inline-block;
    *display: inline;
    width:220px;
    background-color:#DBDBDB;
    margin:8px;
    vertical-align: top;
    zoom: 1; 
}

h1, p {
    padding: 4px;
    margin: 0;
}

<div class='item'>
  <h1>1</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>2</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>3</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>4</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>5</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>More Content</p>
  <p>More Content</p>
</div>

<div class='item'>
  <h1>6</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>7</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>8</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>9</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Answer 2

Оберните все div с контейнером и дайте ему .container { overflow: hidden; } или .container { overflow: auto }.Второй способ - обернуть все элементы div контейнером, поместить еще один элемент div в конец всех элементов div, присвоить имени класса такой пример «clear» и стилизовать его .clear { clear: both }