我想创建一个“记分卡”格来输出一些数据。如果每个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>
