Heim  >  Artikel  >  Web-Frontend  >  So lösen Sie das Problem, dass das übergeordnete Div nicht automatisch geöffnet werden kann, nachdem das untergeordnete Div auf Float gesetzt wurde.

So lösen Sie das Problem, dass das übergeordnete Div nicht automatisch geöffnet werden kann, nachdem das untergeordnete Div auf Float gesetzt wurde.

不言
不言Original
2018-07-25 09:41:472560Durchsuche

Der in diesem Artikel mit Ihnen geteilte Inhalt befasst sich mit dem Festlegen von Float für das untergeordnete Div, was dazu führt, dass das übergeordnete Div nicht automatisch geöffnet werden kann. Der Inhalt ist sehr detailliert Schauen Sie sich den spezifischen Inhalt an. Ich hoffe, er kann allen helfen.

Grund: Das innere p verliert die Stile von clear:both und display:block nach float:left, sodass das äußere p nicht geöffnet wird.

Im Folgenden sind mehrere Lösungen aufgeführt (vorausgesetzt, die Klasse des übergeordneten p ist „Container“):

  • Methode 1. Verwenden Sie Pseudoklassen

container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/
}
  • Methode 2. Das Prinzip der Nichtverbreitung besteht darin, dass der Überlauf nicht sichtbar ist. Fügen Sie also einfach overflow:auto; zum übergeordneten p hinzu 🎜>

  • container{
        overflow: auto;/*让主要内容区随内容自动撑开*/
        overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不完美*/
         _height:1%;/*对IE的hack*/
    }
  • Methode 3. Sie können am Ende ein Sub-P hinzufügen, um den Float zu löschen:

    5e61f882fc28a1ad04b8488b9fa829db94b3e26ee717c64999d7867364b1b4a3Legen Sie den Stil fest.
    clear{clear:both; font-size:0; height:1%;}

  • Methode 4: Sie können die Höhe des übergeordneten p festlegen (dh manuell erweitern, was unflexibel ist);

  • Methode 5 , setze es direkt auf das übergeordnete p

    Dadurch wird es auch automatisch erweitert display: inline-block;

  • Methode 6. Setze das untergeordnete p direkt

    und es kann auch automatisch geöffnet werden, aber Das Satzproblem muss untersucht und untersucht werden display: inline-block;

  • Methode 7. Ich habe im Internet auch eine Methode gefunden, um dem übergeordneten p Attribute hinzuzufügen:

    display:table;

  • Methode 8. Wenn das untergeordnete p schwebt, kann ich Sie nicht fangen? OK, ich lasse auch das übergeordnete p schweben: Die übergeordnete p-Einstellung

    kann auch verwendet werden float: left;

Verwandte Empfehlungen:

tinymce und prism implementieren hervorgehobenen Code und chinesischen Konfigurationsmethodenprozess

Einführung in das dynamische Generieren und Hinzufügen von HTML-Elementen Attribute zu Elementen (Code angehängt)

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass das übergeordnete Div nicht automatisch geöffnet werden kann, nachdem das untergeordnete Div auf Float gesetzt wurde.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn