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

Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen

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

Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen

Grundlegende Schritte zur Sicherheitseinstellung für den CentOS7-Server

Tutorial zur Installation des Tomcat-Servers unter Windows

MySQL 8.0.11 Installations-Tutorial unter Windows

Beispiel für die MySQL-Methode zum Löschen von Daten und Datentabellen

Das Fehlschlagen der Wiedergabe von FLV-/MP4- und anderen Videodateien auf der Website hängt mit dem MIME-Typ zusammen.

So zeigen Sie die IP-Adresse von Linux in einer virtuellen VMware-Maschine an

Best Practices-Handbuch für partitionierte MySQL-Tabellen

Implementierung eines Random Roll Callers basierend auf JavaScript

Eine kurze Diskussion über die drei Hauptprobleme von JS: Asynchronität und Single-Thread

Artikel empfehlen

5 einfache Möglichkeiten, Speicherplatz auf Ubuntu freizugeben

So verwenden Sie iostat zum Anzeigen der IO-Leistung von Linux-Festplatten

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

Auszeichnungssprache - Phrasenelemente

Detailliertes Tutorial zur Installation von CUDA9.0 auf Ubuntu16.04

So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage

So installieren und speichern Sie die PostgreSQL-Datenbank in Docker

So fügen Sie Spalten in einer MySQL-Datenbank hinzu, löschen und ändern sie

Viewport-Parameter für mobile Browser (Web-Frontend-Design)

Vue verwendet v-model, um den gesamten Prozess der El-Paginierungskomponenten zu kapseln

Reines CSS zum Ändern der Layoutgröße durch Ziehen nach links und rechts

JavaScript-Grundlagenoperatoren

Nginx-Signalsteuerung

So erstellen Sie mit Squid einen Proxyserver für http und https

Installationsprozess von CentOS8 Linux 8.0.1905 (Abbildung)