Wie richtet man nicht verschachtelte Divs mithilfe von Inline-Block nebeneinander aus?

Nicht verschachtelte Divs nebeneinander ausrichten

Bei der Arbeit mit nicht verschachtelten Divs kann es schwierig sein, sie als nächstes zu platzieren zueinander. Ähnlich der in der Frage beschriebenen Situation:

<div id="parent_div_1">
<br> <div class="child_div_1"></div>
<br> <div class="child_div_2"></div>
<br>
</div><p></p><div id="parent_div_2">
<br> <div class="child_div_1"></div>
<br> <div class="child_div_2"></div>
<br>
</div><p></p><div id="parent_div_3">
<br> <div class="child_div_1"></div>
<br> <div class="child_div_2"></div>
<br>
</div><br>

> ;

In diesem Szenario muss jedes Paar von „child_div_1“ und „child_div_2“ nebeneinander platziert werden.

Lösung mit Inline-Block

Divs sind standardmäßig Blockelemente, was bedeutet, dass sie die gesamte verfügbare Breite einnehmen. Um dieses Problem zu beheben, können wir den Befehl „display:inline-block;“ verwenden. Eigenschaft.

<br>.child_div_1, .child_div_2 {<br> display: inline-block;<br>}<br>

With ' inline-block“ werden die Divs inline gerendert, ohne den Fluss der Elemente zu unterbrechen. Sie verhalten sich jedoch weiterhin wie Blockelemente.

Vorteile von Inline-Block

• Einfacher zu verwenden im Vergleich zu Floats
• Bietet mehr Flexibilität in Layout und Ausrichtung
• Ermöglicht eine präzise Kontrolle über die Größe und den Abstand von Elementen

Weitere Details und eine ausführlichere Erklärung finden Sie im bereitgestellten Tutorial unter http://learnlayout .com/inline-block.html.

Das obige ist der detaillierte Inhalt vonWie richtet man nicht verschachtelte Divs mithilfe von Inline-Block nebeneinander aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!