Wie kann verhindert werden, dass Inline-Block-Div umgebrochen wird?-CSS-Tutorial-php.cn

Wie kann verhindert werden, dass Inline-Block-Div umgebrochen wird?

PHPz

Freigeben： 2023-09-03 20:29:06

nach vorne

1025 Leute haben es durchsucht

如何防止inline-block div换行？

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.

Grammatik

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;
}

Nach dem Login kopieren

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.

Beispiel 1

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.

<html>
<head>
   <style>
      .container {
         white-space: nowrap;
      }
      .inline-block-div {
         display: inline-block;
         width: 200px;
         height: 100px;
         border: 1px solid black;
         margin: 10px;
      }
   </style>
</head>
<body>
   <h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
   <div class = "container">
      <div class = "inline-block-div"> Div 1 </div>
      <div class = "inline-block-div"> Div 2 </div>
      <div class = "inline-block-div"> Div 3 </div>
   </div>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

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.

<html>
<head>
   <style>
      .container {white-space: nowrap;}
      .table {white-space: nowrap; display: inline-block; vertical-align: top; margin: 10px; border: 1px solid black;}
      th, td {padding: 10px 40px; border: 1px solid black;}
   </style>
</head>
<body>
   <h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
   <div class = "container">
      <table class = "container table">
         <tr><th> school Name </th> <th> Total Students </th> </tr>
         <tr><td> ABC School </td> <td> 100 </td></tr>
      </table>
      <table class = "container table">
         <tr><th> AC brand </th> <th> color </th><th> Price </th></tr>
         <tr><td> LG </td> <td> White </td> <td> 10000 </td> </tr>
      </table>
   </div>
</body>
</html>

Nach dem Login kopieren

Beispiel 3

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.

<html>
<head>
   <style>
      .child {width: 300px; background-color: blue; height: 200px; display: inline-block; margin: 10px; color: white; font-size: 30px;}
   </style>
</head>
<body>
   <h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
   <div class = "parent">
      <div class = "child"> First </div>
      <div class = "child"> Second </div>
      <div class = "child"> Third </div>
      <div class = "child"> Fourth </div>
   </div>
   <script>
      let divs = document.querySelectorAll('div');
      let divsArray = Array.from(divs);
      // add white-space: nowrap to all div
      divsArray.forEach(div => {
         div.style.whiteSpace = 'nowrap';
      });
   </script>
</body>
</html>

Nach dem Login kopieren

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!