erzwingen, dass ein div Floating-Child-Divs enthält

Lesezeit: 2 Minuten

Benutzeravatar von tic
Tick

Ich versuche, das Thema Twentyeleven in WordPress anzupassen. Es hat ein 2-Spalten-Layout, das eingerichtet wurde von:

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

und

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

Ich bin mir nicht sicher, ob es andere relevante CSS-Eigenschaften gibt style.css die ich nicht erkannt habe. Jedenfalls liegen die Child-Divs draußen #main. Wie kann ich erzwingen, dass die untergeordneten Divs in enthalten sind #main? (abgesehen von der Verringerung der Breite von #primarywas für mich keine Wirkung hat)

  • Drei Antworten gleichermaßen akzeptabel. Bitte schlagen Sie mir vor, welche die Prüfung “akzeptierte Antwort” wert ist.

    – Tick

    21. August 2012 um 14:28 Uhr

Benutzeravatar von Blender
Mixer

Sie müssen hinzufügen overflow: auto zu #main:

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}

  • Warum funktioniert das? MDN und W3 sind irgendwie verschwommen darüber, was overflow: auto tut (abgesehen davon, dass es UA-abhängig ist) und ich habe Angst, CSS zu verwenden, das ich nicht verstehe. overflow: hidden und overflow: scroll beide scheinen den gleichen Effekt zu erzielen, aber ich weiß nicht warum sie Arbeit, entweder.

    – Mark Amery

    31. März 2015 um 19:11 Uhr


  • Dieser Link (den ich bereits seit dem Posten gefunden habe) enthält eigentlich keine Erklärung dafür warum (geht so ziemlich nur ‘whoa, das funktioniert’), aber es gibt einen Versuch, die Mechanik unter stackoverflow.com/a/16056509/1709587 zu erklären, der auf einen Blick anständig aussieht. Ich muss weiterlesen.

    – Mark Amery

    31. März 2015 um 20:01 Uhr


  • Ich habe zuvor kommentiert, dass dies bei aktuellen Versionen von Chrome nicht funktioniert – das war falsch, aber Sie müssen sicherstellen, dass Ihr Element dies tut display: block damit es funktioniert. Sie können auch verwenden display: flow-rootaber die Unterstützung dafür ist nicht toll

    – Jules

    16. Februar 2018 um 9:41 Uhr

Benutzeravatar von LeBen
Leben

Sie sollten die Clearfix-Methode mit dem Pseudo-Element :after verwenden, da in Ihrem Fall das Clear nicht wirklich nach den Kindern angewendet wird.

#main:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; 
}

http://jsfiddle.net/zfsjb/

BEARBEITUNG 2020:

Seit einiger Zeit funktioniert diese einfachere Lösung genauso gut:

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

Auch die Verwendung wird jetzt empfohlen ::after Anstatt von :after anderen Pseudo-Elementen entsprechen.

  • Perfekt! Vielen Dank. Das suche ich schon seit Jahren. Ich habe overflow:auto vermieden, da ich manchmal mit unerwarteten Bildlaufleisten endete und ich denke, dass diese Verwendung von overflow obskur ist. Und manchmal endete ich damit, den alten Hack von nbsp zu verwenden; im Container. Ihr CSS ergibt für mich einen logischen Sinn.

    – John Blair

    4. April 2020 um 13:19 Uhr

  • Das ist unglaublich schön

    – Reisender Widder

    3. November 2020 um 6:46 Uhr

Versuchen Sie zu geben width: 100%; position:absolute zu #main.

Hier ist eine funktionierende Live-Demo

In einigen Fällen müssen Sie nur min-height auf das übergeordnete Element anwenden

1402710cookie-checkerzwingen, dass ein div Floating-Child-Divs enthält

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy