webentwicklung-frage-antwort-db.com.de

Wie passt man die Höhe eines Div an, um die schwebenden Kinder einzuwickeln?

Ich habe ein Div um zwei Kinder gewickelt, eines links und das andere rechts. Ich möchte einen Rand und einen Hintergrund um die Kinder setzen, aber das div hat eine Höhe von 0, da die Größe nicht an die Kinder angepasst wird.

Hier ist ein Beispiel davon in Aktion: http://jsfiddle.net/VVZ7j/17/

Ich möchte, dass der rote Hintergrund ganz nach unten geht. Ich habe es mit height: auto ausprobiert, aber das hat nicht funktioniert.

Jede Hilfe wäre dankbar, danke.

P.S. Ich möchte kein Javascript verwenden, wenn dies möglich ist.

27
user1447371

Dies ist ein häufiges Problem bei der Arbeit mit Schwimmern. Es gibt mehrere gängige Lösungen, die ich nach persönlichen Vorlieben bestellt habe (beste Vorgehensweise zuerst):

  1. Verwenden Sie das :: after CSS-Pseudoelement. Dies ist als 'clearfix' bekannt und funktioniert ab IE8. Wenn Sie Kompatibilität mit früheren Versionen von IE benötigen, sollte diese Antwort helfen . Beispiel .

    .parentelement::after {
        content: "";
        display: table;
        clear: both;
    }
    
  2. Fügen Sie die beiden Floats mit dem CSS-Attribut overflow: auto oder overflow: hidden in einen Container ein. Dieser Ansatz kann jedoch zu Problemen führen (wenn beispielsweise eine QuickInfo die Kanten des übergeordneten Elements überlappt, wird eine Bildlaufleiste angezeigt). Beispiel .

    <div style="overflow: auto">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  3. Fügen Sie dem übergeordneten Element eine festgelegte Höhe hinzu. Beispiel .

    <div style="height: 200px">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  4. Machen Sie aus dem übergeordneten Element einen Float. Beispiel .

    <div style="float: left">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  5. Fügen Sie ein Div hinter den Floats mit clear: both hinzu. Beispiel .

    <div style="float: left"></div>
    <div style="float: left"></div>
    <div style="clear: both"></div>
    
60
jacktheripper

Fügen Sie overflow: hidden; zu #wrap hinzu. Dies ist ein clear fix. Hier ist eine Dokumentation darüber: http://positioniseverything.net/easyclearing.html

LE: Je nach Browserkompatibilität gibt es mehrere Möglichkeiten, dies zu erreichen:

  1. Überlauf hinzufügen: Im übergeordneten Container ausgeblendet.

#wrap { overflow: hidden; }

  1. Verwenden Sie ein Pseudoelement, um clear: both hinzuzufügen.

#wrap:after { clear: both; content: ""; display: table;}

  1. Die am häufigsten verwendete Technik ist das Hinzufügen eines Extra als letztes Element des übergeordneten Containers.

<div style="clear:both"></div>

Ich bevorzuge not die dritte zu verwenden, wenn Sie zusätzliche HTML-Markup erhalten.

5
BebliucGeorge

Versuchen Sie, overflow: hidden zu Ihrem #wrapdiv hinzuzufügen.

3
Jim

Ich bin gekommen, um diese "Micro-Clearfix" -Lösung von Nicolas Gallagher zu verwenden.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

Fügen Sie das einfach zu Ihrem CSS und zu jedem floatierten Element hinzu, fügen Sie dem Wrapper jedes Elements, das untergeordnete Elemente enthält, die Klasse "cf" hinzu.

2
jmbertucci

Fügen Sie einfach ein weiteres div mit style clear hinzu: beide bevor Sie ein äußeres div schließen, d. H. Hier "wrap"

--Beispielcode--

<div id="wrap">
    <div id="left">
        <p>some content at left</p>
    </div>
    <div id="right">
        <p>some content at right</p>
    </div>
    <div style="clear:both"></div>
</div>
0
vikrantx