css-float - CSS float，清除一个 "row"的 float 元素

Question

我想创建一个“记分卡”网格来输出一些数据。如果每个 div.item 中的数据都具有相同的高度，那么在每个 div.item 上留下一个简单的 float 会提供一个漂亮的均匀布局，它可以根据浏览器大小很好地缩放。

但是如果数据是可变的，每个 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>

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>