CSS浮动,清除浮动元素的"行"

Question

我想创建一个"记分卡"网格来输出一些数据.如果每个div.item中的数据都是相同的高度,那么每个div.item上留下一个简单的浮点数会提供一个漂亮的均匀布局,可以根据浏览器大小很好地扩展和缩小.

但是,如果数据是可变的,每个div中的行数不同,那么元素浮动的方式会产生不均匀且混乱的输出.请参阅下面的代码示例 如果您使用以下内容创建页面,请将浏览器的大小调整为大约800px宽,以便框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>