html - CSS:如何使 block 覆盖父 block 的所有宽度

Question

我已经多次遇到同样的问题。当我显示一个带有 float 属性的 block 时，下一个 block 开始与第一个 block 重叠。例如

下面的代码块

.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所在的行....

实际上，问题在于，我无法理解如何以某种方式控制这些 block 的高度...因为如果我为它们添加边框(或为之后显示的元素)，我会看到这些边界更高...

这里是一些屏幕:

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

有人帮忙会很开心

Answer 1

看来您需要清除 float 。

包括所有<div class="row_item"> ... </div>在父 DIV 中并应用以下 CSS:

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

或

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

<br style="clear:both" />