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

Detaillierte Beispiele zur Ajax-Verwendung in js und jQuery

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

Detaillierte Beispiele zur Ajax-Verwendung in js und jQuery

Vue verwendet berechnete Eigenschaften, um die Erstellung dynamischer Schieberegler abzuschließen

Beispiele für die Erstellung und Verwendung von MySQL-Triggern

Beispiel für die Verwendung von HTML+CSS zur Implementierung einer sekundären Menüleiste beim Bewegen der Maus

CSS-Box ausblenden/einblenden und dann den Implementierungscode der obersten Ebene

Zusammenfassung der in MySQL häufig verwendeten Verkettungsanweisungen

So führen Sie Befehle auf einem Remote-Linux-System über SSH aus

Problem mit der Parameterübergabe beim Sprung auf HTML-Seite

So verwenden Sie den temporären MySQL 5.7-Tablespace, um Fallstricke zu vermeiden

Detaillierte Erklärung des Initialisierungsmechanismus in Bash

Artikel empfehlen

Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden

So fügen Sie einen Docker-Port hinzu und erhalten eine Docker-Datei

Analyse der HTTP-Dienstschritte auf einer virtuellen VMware-Maschine

Super ausführliches Tutorial zur Installation und Konfiguration von MySQL8.0.22

Detailliertes Beispiel einer MySQL-Austauschpartition

【HTML-Element】So betten Sie Bilder ein

So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus

XHTML-Tutorial für den Einstieg: Formular-Tags

Zusammenfassung gängiger MySQL-DDL-Operationen

Anweisungen zur Verwendung des Meta-Viewport-Tags (Zoom-Steuerung beim mobilen Surfen)

Analyse der Nginx-Konfiguration und häufig gestellter Fragen des Alibaba Cloud CentOS7-Servers

MySql fügt Daten erfolgreich ein, meldet aber [Err] 1055 Fehlerlösung

Eine kurze Erläuterung zur Verwendung von Slots in Vue

Beim Bereitstellen von rabbitmq mit Docker sind zwei Probleme aufgetreten

Detaillierte Erklärung von PID und Socket in MySQL