如何使用内联块并排对齐非嵌套 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中文网其他相关文章！