In CSS wird das Attribut „display“ verwendet, um die Anzeige untergeordneter Elemente festzulegen. Wenn wir den Wert „inline-block“ für die Anzeigeeigenschaft festlegen, werden alle untergeordneten Elemente nebeneinander angezeigt. Darüber hinaus wird automatisch ein responsives Design erstellt. Wenn nicht genügend Platz vorhanden ist, werden untergeordnete Elemente automatisch umschlossen.
Manchmal müssen wir aufhören, untergeordnete Elemente zu verpacken, um den Webspace zu verwalten. In diesem Fall können wir die CSS-Eigenschaft „white-space“ verwalten, um das Umschließen untergeordneter Elemente zu vermeiden.
Benutzer können der folgenden Syntax folgen und die CSS-Eigenschaft „white-space“ verwenden, um zu verhindern, dass Inline-Block-Divs umbrochen werden.
CSS_selector { white-space: nowrap; }
In der obigen Syntax ist CSS_selector das übergeordnete Element aller untergeordneten Elemente, für deren Anzeige wir „inline-block“ festlegen.
Lassen Sie uns das folgende Beispiel durchgehen, um zu verstehen, wie Sie verhindern können, dass Inline-Blockelemente umbrochen werden.
Im folgenden Beispiel haben wir ein übergeordnetes div-Element erstellt, das den Klassennamen „container“ enthält. Danach haben wir drei untergeordnete Elemente im übergeordneten Container hinzugefügt, die jeweils den Klassennamen „inline-block-div“ enthalten.
In CSS verwenden wir die CSS-Eigenschaft „white-space: no-wrap“ für den übergeordneten Container und „display: inline-block“ für alle untergeordneten Elemente. Darüber hinaus verwenden wir einige andere CSS-Eigenschaften, um das div-Element zu formatieren.
In der Ausgabe kann der Benutzer versuchen, die Größe des Browserfensters zu reduzieren und beobachten, dass das Inline-Block-Div-Element nicht umgebrochen wird oder zur nächsten Zeile wechselt.
Preventing the inline-block divs from wrapping
Div 1Div 2Div 3
Im folgenden Beispiel haben wir mehrere Tabellen mit unterschiedlichen Daten hinzugefügt. Die erste Tabelle enthält Schuldaten und die zweite Tabelle enthält AC-Daten.
Wir stellen die Anzeige beider Tabellen gleich dem Inline-Block ein, um sie nebeneinander auf der Webseite anzuzeigen. Zusätzlich verwenden wir das Attribut „white-space“ mit dem div-Element „container“.
In der Ausgabe können wir die beiden Tabellen nebeneinander beobachten und wenn wir die Fenstergröße reduzieren, geht die Tabelle nicht in die nächste Zeile, da wir verhindern, dass beide Tabellenelemente umbrochen werden.
Preventing the inline-block divs from wrapping
school Name Total Students ABC School 100
AC brand color Price LG White 10000
Im folgenden Beispiel zeigen wir, wie man verhindert, dass ein Inline-Block-Div-Element bedingt umbrochen wird. Wenn wir verhindern müssen, dass ein Inline-Block-Div-Element unter einer bestimmten Bedingung umgebrochen wird, können wir JavaScript verwenden.
In JavaScript greifen wir auf alle div-Elemente zu und iterieren über alle div-Elemente mit der Methode forEach(). Wir verwenden die „whitespace“-Eigenschaft des Style-Objekts, um zu verhindern, dass alle Inline-Block-Divs mithilfe von JavaScript umbrochen werden.
Preventing the inline-block divs from wrapping
FirstSecondThirdFourth
Der Benutzer hat gelernt, wie man verhindert, dass Inline-Block-Div-Elemente umbrochen werden. Wir verwenden die CSS-Eigenschaft „white-space“, um zu verhindern, dass das div-Element umbrochen wird. Das Verhindern des Umbruchs von Inline-Block-Div-Elementen ist jedoch keine gute Vorgehensweise, da dadurch die Reaktionsfähigkeit der Webseite beeinträchtigt wird. In bestimmten Fällen können wir dies jedoch verhindern, wenn wir nicht möchten, dass sich das Div-Element vertikal ausdehnt.
Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Inline-Block-Div umgebrochen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
