如何在不嵌套的情況下並排顯示 Div？

實現Div 的並排顯示

在處理應水平相鄰顯示的多個div 元素時，會出現一個常見的挑戰，特別是如果它們沒有嵌套的話彼此之內。在這種情況下，使它們並排可能會很棘手。

問題陳述：

考慮以下 HTML 結構：

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

目標是讓每對child_div_1和child_div_2元素並排顯示。

解：

為了實現這一點，「內聯塊」的概念發揮作用。預設情況下，div 元素是區塊元素，這表示它們佔據全部可用寬度。但是，透過將 display 屬性設為 inline-block，div 可以在不中斷元素流的情況下渲染內聯，同時仍被視為區塊元素。

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

透過此修改，子 div 將內聯渲染，佔用空間而不擴展整個寬度。這允許它們在各自的父親 div 中並排顯示。

以上是如何在不嵌套的情況下並排顯示 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！