7 Stimmen

Wie kann man fließende Elemente mit HTML/CSS enthalten?

Angenommen, ich habe folgenden HTML-Code:

<head>
    <style>
        #container {
            border: 1px red solid;
        }
        .floaty {
            width: 200px;
            float: left;
            border: 1px green solid;
        }
    </style>
</head>
<body>
<div id='container'>
    Text inside the container
    <div class='floaty'>
    Floaty block 1<br/>
    Floaty block 1<br/>
    Floaty block 1<br/>
    </div>
    <div class='floaty'>
    Floaty block 2<br/>
    Floaty block 2<br/>
    Floaty block 2<br/>
    </div>
    <div class='floaty'>
    Floaty block 3<br/>
    Floaty block 3<br/>
    Floaty block 3<br/>
    </div>
</div>
</body>

Dies wird wie folgt wiedergegeben: floaty divs

Was ist der richtige CSS-Weg, um den Container (rot umrandeten Box) vollständig umgeben die floaty grün umrandeten Boxen haben?

20voto

Nick Craver Punkte 609016

Hinzufügen einer overflow: auto in den Container, etwa so:

#container {
     border: 1px red solid;
     overflow: auto;
}

Sie können die Wirkung hier testen und finden eine sehr gute Beschreibung, wie es funktioniert, hier .

3voto

Pekka Punkte 429407

Hinzufügen. overflow: auto in den Container oder wenden Sie ein clearfix .

0voto

ExE Boss Punkte 106

Auf modernen Browsern können Sie verwenden [display](https://developer.mozilla.org/docs/Web/CSS/display): flowroot; oder die [contain](https://developer.mozilla.org/docs/Web/CSS/contain) Eigenschaft, die die unproblematische Art sind, dies zu tun:

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X