CSS: Comment faire un bloc pour couvrir toute la largeur du bloc parent

Question

J'ai déjà rencontré plusieurs fois le même problème. Lorsque j'affiche un bloc avec la propriété float, le bloc suivant commence à chevaucher le premier. par exemple.

Après bloc de code

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

}

Donc, si en html je:

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

top 100

Ce mot top100, commence à afficher dans la rangée avec ces 3 divs ....

En fait, le problème est que, je ne peux pas comprendre, comment rendre la taille de ces blocs contrôlable d'une certaine façon ... Parce que si j'ajoute des bordures pour eux, (ou pour un élément qui s'affiche après), je vois que les frontières sont plus élevés ...

Voici quelques écrans:

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

sera vraiment heureux si quelqu'un vous aidera

Answer 1

Il semble que vous devez effacer vos flotteurs.

Aménager tous <div class="row_item"> ... </div> dans un DIV parent et donner appliquer CSS suivant:

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

OU

Après le dernier <div class="row_item"> ... </div> ajouter ce qui suit:

<br style="clear:both" />