css两个盒子左右排列

在CSS中，使用盒模型来描述HTML元素的布局方式。盒模型包括元素的内容、内边距、边框和外边距。在这篇文章中，我们将介绍如何使用CSS实现两个盒子的左右排列。

首先，我们需要用HTML创建两个盒子。在这个例子中，我们使用div元素：

<div id="box1">盒子1</div>
<div id="box2">盒子2</div> 

接下来，在CSS中，我们需要设置这两个盒子的样式和布局。我们可以使用float属性将它们左右排列：

#box1 {
  width: 50%;
  height: 200px;
  background-color: red;
  float: left;
}

#box2 {
  width: 50%;
  height: 200px;
  background-color: blue;
  float: right;
} 

在上述代码中，我们使用width属性设置盒子的宽度为50%。这意味着每个盒子将占用浏览器窗口的一半宽度。我们还使用height属性设置盒子的高度为200px，并使用background-color属性设置盒子的背景颜色。最后，我们使用float属性将第一个盒子向左浮动，第二个盒子向右浮动。

通过以上设置，我们就成功实现了两个盒子的左右排列。