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

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

Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden

Lassen Sie mich zunächst eine interessante Eigens...

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

Holen Sie sich das Dockerfile aus dem Docker-Imag...

Analyse der HTTP-Dienstschritte auf einer virtuellen VMware-Maschine

1. Verwenden Sie xshell, um eine Verbindung mit d...

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

Hallo zusammen, heute lernen wir die Installation...

Detailliertes Beispiel einer MySQL-Austauschpartition

Detailliertes Beispiel einer MySQL-Austauschparti...

【HTML-Element】So betten Sie Bilder ein

Mit dem img-Element können wir Bilder in HTML-Dok...

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

Neulich habe ich rsync verwendet, um eine große D...

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

<br />Formulare sind für Benutzer ein wichti...

Zusammenfassung gängiger MySQL-DDL-Operationen

Bibliotheksverwaltung Erstellen einer Bibliothek ...

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

1. Frage: Ich habe in diesen Tagen Einfügevorgäng...

Eine kurze Erläuterung zur Verwendung von Slots in Vue

Definition und Verwendung: Verwenden Sie die Slot...

Beim Bereitstellen von rabbitmq mit Docker sind zwei Probleme aufgetreten

1. Hintergrund Die folgenden zwei Probleme treten...

Detaillierte Erklärung von PID und Socket in MySQL

Inhaltsverzeichnis 1. Einführung in die PID-Datei...