如何将两个div并排放置

2023-12-30

在网页上,我有两个 div。我想将第二个 div 放置在另一个 div 的右侧,以便它们排成一行。


您可以使用floatCSS 样式。将其设置为left对于第一个 div。第二个 div 将放置在它的右侧(只要有足够的空间)

<div>
  <div style="float: left">
     <p> This div will be on the left</p>
  </div>
  <div >
     <p> This div will be on the right</p>
  </div>
  <!-- optionally, you may need to add a "clearance" element below the floating divs -->
  <div style="clear: both" ></div>
</div>

请注意,有时可能需要为浮动 div 提供固定宽度才能实现正确的水平布局。

<div>
  <div style="width: 100px; float: left">
     <p> 100px div will be on the left</p>
  </div>
  <div style="width: 200px">
     <p> 200px div will be on the right as long as there is enough 
         horizontal space in the container div
     </p>
  </div>
  <!-- optionally, you may need to add a "clearance" element below the floating divs -->
  <div style="clear: both" ></div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将两个div并排放置 的相关文章