如何使用內聯塊在單獨的父 Div 內並排對齊子 Div？

如何在非嵌套父Div 內並排對齊子Div

您有兩個並排的div，每個都在他們自己的父親div。這些父 div 會重複多次。您希望將每對 child_div_1 和 child_div_2 水平放置在一起。

要實現此目的，請使用 display:inline-block;子 div 的 style 屬性。此屬性允許 div 作為內聯元素對齊，而不會中斷內容的正常流動。雖然 div 將彼此並排顯示，但它們將保留區塊元素的狀態。

與使用浮動相比，此方法提供了一種更簡單的方法來實現所需的佈局。以下是修改後的 HTML 和 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>

進一步指導，您可以參考以下教學：http://learnlayout.com/inline-block.html

以上是如何使用內聯塊在單獨的父 Div 內並排對齊子 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！