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

Es gibt kein Problem mit dem Linux-Dateipfad beim Bereitstellen der Fenster- und Linux-Projekte

Detaillierte Erläuterung der erzwungenen Freigabe belegter Ports unter Linux und der Methode zum Öffnen von Ports in der Linux-Firewall

Bei der Installation von Nginx, MySQL, Tomcat und...

Durch reines CSS können untergeordnete Elemente die Breitenbeschränkung übergeordneter Elemente durchbrechen.

Es gibt kein Problem mit dem Linux-Dateipfad beim Bereitstellen der Fenster- und Linux-Projekte

Vue CodeMirror realisiert den Effekt des Online-Code-Compilers

So verwenden Sie Binlog zur Datenwiederherstellung in MySQL

Untersuchung der MySQL-Paging-Leistung

Detaillierte Erläuterung des MySQL-Clusterindex und des Nicht-Clusterindex

Detaillierte Erläuterung der drei Möglichkeiten zum Schneiden von Catalina.out-Protokollen in Tomcat

Verbesserung der Wirkung von Hyperlinks im Webdesign und in der Produktion

MySQL 5.7-Bereitstellung und Remotezugriffskonfiguration unter Linux

Detaillierte Beispiele für die Ausführung von Zabbix-Remotebefehlen

Wie viele Daten können in einer MySQL-Tabelle gespeichert werden?

Artikel empfehlen

Detaillierte Erläuterung des MySQL-Clusters: Implementierung einer Master- und einer Slave-Architektur

Detaillierte Erläuterung des virtuellen DOM in der Vue-Quellcodeanalyse

Eine kurze Erläuterung zu „Group By“ in MySQL

Detaillierte Erläuterung der erzwungenen Freigabe belegter Ports unter Linux und der Methode zum Öffnen von Ports in der Linux-Firewall

Slot-Anordnung und Nutzungsanalyse in Vue

Installation des MySQL 5.7.22-Binärpakets und installationsfreie Version – Windows-Konfigurationsmethode

Detaillierte Erklärung der Socket (TCP)-Bindung aus dem Linux-Quellcode

WeChat-Applet zur Bestimmung, ob die Mobiltelefonnummer legal ist Beispielcode

HTML-Grundlagen_Allgemeine Tags, allgemeine Tags und Tabellen

Detailliertes Linux-Installationstutorial

Detaillierte Erklärung inkompatibler Änderungen von Komponenten in vue3

MySQL zeigt ein einfaches Operationsbeispiel

Beispiel zum Erstellen und Ausführen mehrerer MySQL-Container in Docker

Implementierung eines verschachtelten Sprungs der Vue-Routing-Ansicht Router-Ansicht

Analysieren der Knotenereignisschleife und der Nachrichtenwarteschlange