如何在不嵌套的情况下并排显示 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中文网其他相关文章！