如何使用內聯區塊並排對齊非巢狀 div？

並排對齊非巢狀 div

使用非巢狀 div 時，將它們放置在下一個位置可能會很困難彼此。與問題中所描述的情況類似：

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

;

在這種情況下，每對'child_div_1' 和'child_div_2' 需要並排放置。

使用內聯塊的解決方案

Div 預設是塊元素，這意味著它們佔據了全部可用寬度。為了解決這個問題，我們可以使用「display:inline-block;」屬性。

<br>.child_div_1, .child_div_2 {<br>顯示：內聯區塊;<br>}<br>

With ' inline-block” ，div 將內聯渲染，而不會中斷元素流。與浮動相比更易於使用

提供更多靈活性在佈局和對齊中允許精確控制元素的大小和間距

• 更多詳細資訊和更全面的解釋，請參閱http://learnlayout 提供的教學.com/inline-block.html。

以上是如何使用內聯區塊並排對齊非巢狀 div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！