[分享]css两个盒子并排代码

CSS可以很方便地实现两个盒子并排的效果。我们可以使用float属性来设置盒子的横向排列，具体代码如下：

.box1 {
    width: 50%;
    height: 200px;
    float: left; 
}

.box2 {
    width: 50%;
    height: 200px;
    float: left; 
} 

上面的代码中，我们设置了两个盒子的宽度为50%，高度为200px，然后使用float属性设置了它们的横向排列，其中box1在左边，box2在右边。这样，两个盒子就可以并排地显示下来了。

当然，为了使页面的排版更加美观，我们还可以使用margin属性来设置两个盒子之间的间距，代码如下：

.box1 {
    width: 50%;
    height: 200px;
    float: left;
    margin-right: 20px; 
}

.box2 {
    width: 50%;
    height: 200px;
    float: left; 
} 

上面的代码中，我们使用margin-right属性为box1设置了右侧的间距为20px。这样，在两个盒子之间就会有一定的间隔，使页面看起来更加美观。

总的来说，使用CSS实现两个盒子并排的效果非常简单。只需要适当地设置盒子的宽度、高度、float属性和margin属性等属性，就可以轻松实现这一效果。