Question

我已经好几次遇到同样的问题了。当我使用float属性显示一个块时，下一个块开始重叠第一个块。 e.g。

以下代码块

.row_item{
width: 30%;
display: block;
float: left;
padding: 4px;
margin-left: 5px;

}

所以如果在html中我有：

 <div class="row_item">
  <a href="/article/nowstar/">
<img  src="/site_media/uploads/fortpost___png_120x120_crop_q85.jpg" alt="wwwwas"/>
  </a>
  <a href="/article/nowstar/" class="article_title"><h4>Paul Merfy</h4></a>
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и ...</p>
</div>



<div class="row_item">
  <a href="/article/aliohin/">
<img  src="/site_media/uploads/LR_27b_jpeg_120x120_crop_q85.jpg" alt="wdasd"/>
  </a>
  <a href="/article/aliohin/" class="article_title"><h4>Александр Алехин, первый русский чемпион</h4></a>
  <p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. ...</p>
</div>



<div class="row_item">
  <a href="/article/anand/">
<img  src="/site_media/uploads/elekit-battletank-mr-9101-2_jpg_120x120_crop_q85.jpg" alt="wwww"/>
  </a>
  <a href="/article/anand/" class="article_title"><h4>Vishi Anand, чемпион с родины шахмат</h4></a>
  <p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. ...</p>
</div>

前100名

这个单词top100开始显示在包含这3个div的行中....

实际上，问题在于，我无法理解，如何使这些块的高度在某种程度上可控......因为如果我为它们添加边框，（或者为之后显示的元素），我看到了这些边界更高......

这里有一些屏幕：

http://img.skitch.com/20100121-rxb82873i6aeyuyj1aetdu8uie.png

如果有人帮忙，我会非常高兴吗

Answer 1

看起来你需要清除浮子。

将所有<div class="row_item"> ... </div>包含在父DIV中并提供以下CSS：

#row_items {
  width:100%;
  overflow:hidden;
}

OR

在最后<div class="row_item"> ... </div>之后添加以下内容：

<br style="clear:both" />

CSS：如何使块覆盖父块的所有宽度

1 个答案: