it-swarm.com.de

Warum ist der äußere Div-Rand nicht vom gerenderten Inhalt des Elements abhängig?

Ich habe ein Problem, das ich nicht herausfinden kann. Wenn ich ein Div in ein anderes Div schachtele und dem äußeren Div einen Rahmen geben möchte, wird der gerenderte Inhalt nicht umrandet. Obwohl der Inhalt der inneren Divs mehrere Zeilen hoch sein kann, fügt der äußere Rand nur die eventuell vorhandenen Polster hinzu.

Das CSS:

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

Der HTML:

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

Wenn ein Element ein anderes Element enthält, das frei schwebend ist, scheint das erste Element das zweite nicht zu enthalten. Die akzeptierte Lösung funktioniert, sie gefällt mir jedoch nicht, da zur Behebung eines Layoutproblems zusätzliches Markup erforderlich ist.

Eine - in meinen Augen - bevorzugtere Lösung besteht darin, den übergeordneten Überlauf auf auto zu setzen:

.wrapper {
    overflow: auto;
}

Dadurch wird das übergeordnete Element veranlasst, die untergeordneten Elemente zu "enthalten".

4
Grant Palin

Es liegt an den Schwimmern. Sie müssen vor dem schließenden Tag </div> gelöscht werden. Versuche dies:

<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

Um die Floats ohne zusätzliches Markup zu löschen, verwenden Sie Overflow: hidden

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

Der Zoom: 1 ruft hasLayout in ie6 auf, sodass der Float in ie6 gelöscht wird.

1
Emily

Es gibt hier einen ziemlich ausführlichen Artikel über das Löschen von Floats: http://www.positioniseverything.net/easyclearing.html

Es wird auch empfohlen, kein zusätzliches Markup zu verwenden. Stattdessen verwendet a eine einfache CSS-Klasse, die Sie jedes Mal hinzufügen, wenn Sie Floats löschen möchten.

0
andrej