Durch reines CSS können untergeordnete Elemente die Breitenbeschränkung übergeordneter Elemente durchbrechen.
|
In Schreibstilen können wir diese Situation oft sehen
Der Code lautet wie folgt
<div Stil="Breite: 300px;Rahmen: 4px durchgehend #000;Rand: 20px;Polsterung: 2px;">
Übergeordnetes Element <div style="border: 1px solid blue;height: 100px;white-space: nowrap;">
<span>untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente, untergeordnete Elemente</span>
</div>
</div>Wenn Sie über dieses Phänomen nachdenken, stellt sich die Frage: Warum? Sie fragen sich vielleicht, ob das untergeordnete Element nicht die Breite des übergeordneten Elements erweitern sollte? Genauso wie das Erweitern der Höhe des übergeordneten Elements. Warum? Wie können wir also das übergeordnete Element dieses untergeordneten Elements auf diese Breite erweitern? Hier gibt es zwei Lösungen. 1. Anzeige: Inline-Block Der Layoutstil ist wie folgt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
</Kopf>
<Stil>
#box1 {
Breite: 500px;
Höhe: 200px;
Rand: 2px durchgehend blau;
Polsterung: 10px;
}
#box2 {
Leerzeichen: Nowrap;
Anzeige: Inline-Block;
}
#box3 {
Breite: 300px;
Höhe: 200px;
Hintergrundfarbe: blauviolett;
Anzeige: Inline-Block;
vertikale Ausrichtung: Mitte;
}
#box4 {
Breite: 400px;
Höhe: 200px;
Hintergrundfarbe: schwarz;
Anzeige: Inline-Block;
vertikale Ausrichtung: Mitte;
}
</Stil>
<Text>
<div id="box1">
<div id="box2">
<div id="box3"></div>
<div id="box4"></div>
</div>
</div>
</body>
</html>Das Ergebnis ist wie in der Abbildung dargestellt. Box3 und Box4 erweitern die Breite von Box2.
2. Anzeige: Inline-Flex Der Layoutstil ist wie folgt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
</Kopf>
<Stil>
#box1 {
Breite: 500px;
Höhe: 200px;
Rand: 2px durchgehend blau;
Polsterung: 10px;
}
#box2 {
Leerzeichen: Nowrap;
Anzeige: Inline-Flex;
}
#box3 {
Breite: 300px;
Höhe: 200px;
Hintergrundfarbe: blauviolett;
vertikale Ausrichtung: Mitte;
}
#box4 {
Breite: 400px;
Höhe: 200px;
Hintergrundfarbe: schwarz;
vertikale Ausrichtung: Mitte;
}
</Stil>
<Text>
<div id="box1">
<div id="box2">
<div id="box3"></div>
<div id="box4"></div>
</div>
</div>
</body>
</html>Die Wirkung ist wie folgt
Dies ist das Ende dieses Artikels darüber, wie man mit reinem CSS untergeordnete Elemente dazu bringt, die Breitenbeschränkung übergeordneter Elemente zu überschreiten. Weitere relevante CSS-untergeordnete Elemente, die die Breite übergeordneter Elemente überschreiten, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Zwei Möglichkeiten, das Löschen des Eingabetext-Eingabecaches in HTML zu verhindern
>>: MySQL ändert die Standard-Engine und Zeichensatzdetails
Artikel empfehlen
Docker-Befehle werden so implementiert, dass normale Benutzer sie ausführen können
Nach der Installation von Docker gibt es normaler...
Wir treiben IE6 alleine in den Untergang
Tatsächlich fragen wir uns jeden Tag, wann IE6 wi...
Detailliertes Tutorial zur Installation verschiedener (zwei) Versionen der MySQL-Datenbank unter Windows
1. Ursache: Ich muss eine SQL-Datei importieren, ...
vite2.x implementiert das On-Demand-Laden von Ant-Design-Vue@next-Komponenten
1. Version verwenden vite:2.0 Ant-Design-Vue: 2.0...
So behandeln Sie den vom Linux-System gemeldeten Fehler tcp_mark_head_lost
Problembeschreibung Kürzlich meldete ein Host die...
Lösen Sie das Problem der Ausführung von „Hello World“ nach der Docker-Installation
Docker V1.13.1 auf centos7.3 mit yum installiert ...
css3-Animation, Ballrollen, js-Steuerung, Animationspause
Mit CSS3 können Animationen erstellt werden, die ...
Uniapp implementiert Beispielcode für die Anmeldung mit DingTalk-Scancode
Da Uniapp nicht über eine autorisierte DingTalk-A...
Vue setzt die Daten auf ihren ursprünglichen Zustand zurück
In einigen Fällen müssen die Daten in den Daten w...
Einige Dinge, die beim Erstellen einer Webseite zu beachten sind
--Backup der Homepage 1.txt-Text 2. Scannen Sie da...
Vue implementiert eine Formularvalidierungsfunktion
Dieser Artikel beschreibt hauptsächlich, wie die ...
Mac+IDEA+Tomcat-Konfigurationsschritte
Inhaltsverzeichnis 1. Herunterladen 2. Installati...
Detaillierte Schritte zur Installation von JDK und Tomcat auf einem Linux-Cloud-Server (empfohlen)
Herunterladen und Installieren von JDK Schritt 1:...
So implementieren Sie Sveltes Defer Transition in Vue
Ich habe mir vor Kurzem Rich Harris‘ Video „Rethi...
So lesen Sie die regionalen Informationen einer IP mithilfe des Nginx- und GeoIP-Moduls
Installieren Sie GeoIP unter Linux yum installier...