CSS float, очистить "строку" от плавающих элементов

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

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

Очевидно, что если вы измените размер браузера так, чтобы в каждой строке отображалось 4 div, число 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>

Ответы

Ответ 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>

Ответ 2

Оберните все div с контейнером и дайте .container { overflow: hidden; } .container { overflow: hidden; } или .container { overflow: auto }. Второй способ - обернуть все div с контейнером и поместить другой div в нижнюю часть всех div и дать имя класса такой пример "clear" и .clear { clear: both } его .clear { clear: both }