如何将两个div彼此隔开 [英] how to place two divs besides each other

问题描述

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

解决方案

您可以使用 float CSS样式。将它设置为 left 为第一个div。第二个div将被放置在它的右边（只要有足够的空间）。

 < div> 
< div style =float：left> 
< p>此div将位于左侧< / p> 
< / div> 
< div> 
< p>这个div将在右侧< / p> 
< / div> 
 <！ -   - 可选地，您可能需要在浮动div下方添加clearance元素 - > 
< div style =clear：both>< / div> 
< / div> 
  

请注意，有时可能需要给浮动div一个固定宽度以实现适当的水平布局。

 < div> 
< div style =width：100px; float：left> 
< p> 100px div将位于左侧< / p> 
< / div> 
< div style =width：200px> 
< p>只要容器div中有足够的
水平空间，200px div就会在右边
< / p> 
< / div> 
 <！ -   - 可选地，您可能需要在浮动div下方添加clearance元素 - > 
< div style =clear：both>< / div> 
< / div> 
  

On a web page, I have two divs. I would like to place the second div just right to the other one so that they're in a line.

解决方案

You can use the float CSS style. Set it to left for the first div. The second div will be placed just right of it (so long as there is enough space)

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

Note, that sometimes it may be necessary to give the floating divs a fixed width in order to achieve the proper horizontal layout.

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

这篇关于如何将两个div彼此隔开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！