html - 如何将两个div放在一起

Question

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

Answer 1

您可以使用 float CSS 样式。将第一个 div 设置为 left。第二个 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>

请注意，有时可能需要为 float 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>