it-swarm-eu.dev

Proč není vnější hranice div nezávislá na vykreslovaném obsahu prvku?

Mám problém, na který nemůžu přijít. Když vnořím div do jiného divu a chci dát vnější div ohraničení, ohraničení se nezabalí kolem vykresleného obsahu. Přestože by obsah vnitřních jednotek mohl být o několik řádků vysoký, vnější hranice přidá pouze to, co by tam mohlo být.

CSS:

.wrapper {
 width:550px;
 border: 1px solid #ccc;
 clear:both;
 padding: 5px;  
}
.content {
 float:left;
 width:250px;
 background-color:#e1e1e1;
}

HTML:

<div class="wrapper">
<div class="content">
    text<br>
    text<br>
    text<br>
</div>
<div class="content">
 pic
</div>
css
5
Linda Jensen

Pokud prvek obsahuje jiný plovoucí prvek, zdá se, že první prvek neobsahuje druhý. Přijaté řešení bude fungovat, ale nelíbí se mi to, protože k vyřešení problému s rozvržením je třeba další označení.

Více preferovaným řešením - v mých očích je stejně - nastavení rodičovského přepadu na auto:

.wrapper {
    overflow: auto;
}

To způsobí, že nadřazený prvek „obsahuje“ podřízené prvky.

4
Grant Palin

Je to kvůli plavákům. Musíte je vymazat před závěrečnou značkou </div>. Zkuste to:

<div class="wrapper">
    <div class="content">
        text<br>
        text<br>
        text<br>
    </div>
    <div class="content">
         pic
    </div>
    <br style="clear: both;">
</div>
2
John Conde

Chcete-li vyčistit plováky bez dalších značek, použijte přetečení: skryté

.wrapper {overflow:hidden;zoom:1;}

Zoom: 1 vyvolá hasLayout v ie6, takže float se vyčistí v ie6.

1
Emily

Zde je poměrně rozsáhlý článek o zúčtování plováků zde: http://www.positioniseverything.net/easyclearing.html

Doporučuje také nepoužívat žádné další značkování. Místo toho používá jednoduchou třídu css, kterou přidáváte pokaždé, když chcete vyčistit plováky.

0
andrej