CSS浮动，清除“行”的浮动元素 [英] CSS float, clear a "row" of floating elements

问题描述

我想创建一个记分卡网格来输出一些数据。如果每个div.item中的数据都是相同的高度，那么每个div.item上剩下的一个简单的浮点数就给出了一个很好的布局，这取决于浏览器的大小。

如果数据是可变的，每个div中的行数不同，那么元素float的方式会产生不均匀和混乱的输出。见下面的代码示例。如果你创建一个页面与下面，调整浏览器的大小约800px宽，使框1,2和3创建一个行顶部，其次是4,5和6.如何获得7下拉到

显然，如果你调整浏览器的大小，使得每行出现4个div，第9个是元素I想要分解下面5.是否有明显的缺点，或者我需要使用一些Javascript来实现这一点？

  div.item {float：left; width：220px; background-color：#DBDBDB; margin：8px;} h1，p {padding：4px; margin：0;}  

 < div class = '> < h1> 1< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>< div class ='item'> < h1> 2< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>< div class ='item'> < h1> 3< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / 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 = '> < h1> 1< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>< div class ='item'> < h1> 2< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>< div class ='item'> < h1> 3< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>< div class ='item'> < h1> 4< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>< div class ='item'> < h1> 5< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p> < p>更多内容< / p> < p>更多内容< / p>< / div>< div class ='item'> < h1> 6< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>< div class ='item'> < h1> 7< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>< div class ='item'> < h1> 8< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>< div class ='item'> < h1> 9< / h1> < p>内容< / p> < p>内容< / p> < p>内容< / p>< / div>  

I want to create a "scorecard" grid to output some data. If the data in each div.item is all the same height, then a simple float left on each div.item gives a nice even layout which scales up and down nicely depending on browser size.

If the data however is variable, a different number of lines in each div, then the way elements float gives an uneven and messy output. See code sample below. If you create a page with the below, resize the browser to about 800px wide so that box 1, 2, and 3 create a "row" on top, followed by 4, 5 and 6. How do I get 7 to drop down to the next line so it creates a row along with 8 and 9?

Obviously if you resize the browser so that 4 divs appear in each row, number 9 is the element I want to break down below 5. Is there something obvious I am missing or do I need to use some Javascript to achieve this?

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>

解决方案

Change "float: left;" to "display: inline-block; vertical-align: top;"

and it will work the way you want.

Example: 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>

这篇关于CSS浮动，清除“行”的浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！