[分享]css两个div怎么浮动

在 CSS 中，使用浮动属性（float）可以将几个元素元素横向排列。以下是使用浮动属性让两个 div 元素并排的方法： 左侧的 div 内容 右侧的 div 内容 上述代码中，我们使用了 f...

在 CSS 中，使用浮动属性（float）可以将几个元素元素横向排列。以下是使用浮动属性让两个 div 元素并排的方法：

 <div style="float: left; width: 50%;">
    <p>左侧的 div 内容</p>
  </div>
  <div style="float: right; width: 50%;">
    <p>右侧的 div 内容</p>
  </div> 

上述代码中，我们使用了 float 属性将第一个 div 元素向左浮动，第二个 div 元素向右浮动。同时，为了让两个 div 元素占据页面宽度的一半，我们还添加了 width 属性为 50%。

当然，为了使得两个 div 元素排列更加美观，可能需要使用其他属性来进行调整。例如，添加 margin 属性来控制 div 之间的间距，或者添加 border-box 属性来使得 div 的边框宽度也被计算在内。

 <div style="float: left; width: 50%; margin-right: 10px; box-sizing: border-box; border: 1px solid #ccc;">
    <p>左侧的 div 内容</p>
  </div>
  <div style="float: right; width: 50%; margin-left: 10px; box-sizing: border-box; border: 1px solid #ccc;">
    <p>右侧的 div 内容</p>
  </div> 

上述代码中，我们在 div 标签中添加了 margin 属性，同时设置为 10px。通过设置 box-sizing 为 border-box，可以让边框宽度也纳入到宽度计算中。因此，两个 div 元素之间的间距就是 10px。

总结一下，要通过 CSS 将两个 div 元素浮动到页面中，可以利用 float 属性和 width 属性。为了更好的控制样式，可能需要结合 margin 属性、border 属性等。