方式一
<div class="box">
<div class="box_1"></div>
<div class="box_2"></div>
</div>
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 40px;
background-color: khaki;
}
.box_1,.box_2{
width: 50%;
height: 100%;
float:left;
}
.box_1{
background-color: lawngreen;
}
.box_2{
float: right;
background-color: lightcoral;
}
效果展示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200616224305168.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI0MjA1,size_16,color_FFFFFF,t_70#pic_center)
方式二
.box{
width: 100%;
height: 40px;
background-color: lightcoral;
display: flex;
flex-direction: row;
}
.box_1,.box_2{
width: 50%;
height: 100%;
}
.box_1{
background-color: lightgreen;
}
.box_2{
background-color: blueviolet;
}
<div class="box">
<div class="box_1"></div>
<div class="box_2"></div>
</div>
效果展示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200616224318581.png#pic_center)
方式三
.box{
width: 100%;
height: 40px;
background-color: brown;
position: relative;
}
.box_1,.box_2{
width: 50%;
height: 100%;
position: absolute;
}
.box_1{
background-color: burlywood;
}
.box_2{
background-color: cadetblue;
}
<div class="box">
<div class="box_1"></div>
<div class="box_2"></div>
</div>
效果展示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200617220947592.png#pic_center)
方式四
.box{
width: 100%;
height: 40px;
background-color: black;
}
.box_1{
width: 50%;
height: 40px;
background-color: blueviolet;
display: inline-block;
}
.box_2{
width: 50%;
height: 40px;
background-color: brown;
display: inline-block;
margin-left: -5px;
}
<div class="box">
<div class="box_1"></div>
<div class="box_2"></div>
</div>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200617221304493.png#pic_center)