css-float – CSS float,清除浮动元素的“row”

我想创建一个“记分卡”格来输出一些数据。如果每个div.item中的数据都是相同的高度，那么每个div.item上都有一个简单的浮点数，这个布局可以很好地根据浏览器大小进行上下调整。

如果数据是可变的，则每个div中的行数不同，则元素float的方式会产生不均匀和杂乱的输出。见下面的代码示例。如果您创建一个具有以下内容的页面，请将浏览器的大小调整到大约800px的宽度，以便框1,2和3在顶部创建一个“行”，后跟4,5和6.如何让7下拉到下一行，所以它创建一行与8和9？

显然，如果您调整浏览器的大小，以便在每一行中出现4个div，那么9号是我想要在下面分解的元素。有没有什么明显的，我失踪了，还是需要使用一些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>

解决方法

更改“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>