Wie richtet man untergeordnete Divs mithilfe von Inline-Block nebeneinander innerhalb separater übergeordneter Divs aus?

So richten Sie untergeordnete Divs nebeneinander in nicht verschachtelten übergeordneten Divs aus

Sie haben zwei Divs nebeneinander, jedes innerhalb ihre eigene übergeordnete Abteilung. Diese übergeordneten Divs werden mehrmals wiederholt. Sie möchten jedes Paar von child_div_1 und child_div_2 horizontal nebeneinander positionieren.

Um dies zu erreichen, verwenden Sie den display:inline-block; style-Eigenschaft für die untergeordneten Divs. Diese Eigenschaft ermöglicht die Ausrichtung der Divs als Inline-Elemente, ohne den normalen Inhaltsfluss zu unterbrechen. Während die Divs nebeneinander angezeigt werden, behalten sie ihren Status als Blockelemente.

Diese Methode bietet im Vergleich zur Verwendung von Floats eine einfachere Möglichkeit, das gewünschte Layout zu erreichen. Hier ist ein Beispiel für das geänderte HTML und CSS:

<code class="html"><div id='parent_div_1'>
  <div class='child_div_1' style="display:inline-block;"></div>
  <div class='child_div_2' style="display:inline-block;"></div>
</div></code>

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

Weitere Anleitungen finden Sie im folgenden Tutorial: http://learnlayout.com/inline-block.html

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