Wie zeige ich Divs nebeneinander ohne Verschachtelung an?

Erzielen der Nebeneinanderanzeige von Divs

Beim Umgang mit mehreren Div-Elementen, die horizontal nebeneinander angezeigt werden sollen, entsteht eine häufige Herausforderung, insbesondere wenn sie nicht verschachtelt sind ineinander. In solchen Fällen kann es schwierig sein, sie nebeneinander zu platzieren.

Problemstellung:

Bedenken Sie die folgende HTML-Struktur:

<code class="html"><div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div></code>

Das Ziel besteht darin, jedes Paar der Elemente child_div_1 und child_div_2 nebeneinander anzuzeigen.

Lösung:

Um dies zu erreichen, wurde das Konzept des „Inline-Blocks“ verwendet. kommt ins Spiel. Standardmäßig sind div-Elemente Blockelemente, was bedeutet, dass sie die gesamte verfügbare Breite einnehmen. Wenn Sie jedoch die Anzeigeeigenschaft auf „inline-block“ setzen, können Divs inline gerendert werden, ohne den Fluss der Elemente zu unterbrechen, während sie weiterhin als Blockelemente behandelt werden.

<code class="css">.child_div_1, .child_div_2 {
  display: inline-block;
}</code>

Mit dieser Änderung werden die untergeordneten Divs inline gerendert , nimmt Platz ein, ohne sich über die gesamte Breite auszudehnen. Dadurch können sie innerhalb ihrer jeweiligen übergeordneten Divs nebeneinander angezeigt werden.

Das obige ist der detaillierte Inhalt vonWie zeige ich Divs nebeneinander ohne Verschachtelung an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!