[分享]css两个盒子怎么在同一水平

在进行网页页面设计时，常常会用到两个盒子，如何让它们在同一水平呢？我们可以利用CSS样式来实现。

.box1{
    float: left;
    width: 200px;
    height: 200px;
    background-color: #30bfbf;
}

.box2{
    float: left;
    width: 200px;
    height: 200px;
    background-color: #ff8c00;
} 

以上代码中，我们先分别定义了两个盒子box1和box2，并设置了它们的浮动方式为left，这样就可以实现在同一水平上的效果。

对于box1和box2的宽度和高度，根据实际设计需要自行设置；背景色也可以根据需要进行调整。

在HTML页面中，将定义好的盒子嵌套进去即可。

<div class="box1"></div>
<div class="box2"></div> 

使用CSS样式的好处在于，可以让网页更加美观，同时还可以节约HTML代码的长度，提高开发效率。