百分比布局

百分比布局，可以实现宽度自适应

<style>
.contain{
width: 80%;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
}
.box{
width: 33.33%;
height: 200px;
float: left;    
background-color: lime;
}
.box:nth-child(2){
 background-color: red;
}
</style>
    

<div class="contain">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

 

来源：https://www.cnblogs.com/zhaodz/p/11572637.html