html 基本布局1---div 嵌套布局
box sizing需求：div3 宽100R% ,⾼100px，内部包含div1和div2; div1 宽100px,⾼100px, 如何使div2宽度充满剩余空间（尽量使⽤css实现）解决⽅案1---弹性盒布局：
解决⽅案2---CSS3新属性 calc ：
兼容性参考：
.div3{
width : 100%;
height : 100px ;
display : flex ;
}
.div1{
width : 100px ;
height : 100px ;
background-color : bisque ;
}
.div2{
flex : 1;
height : 100px ;
background-color : #aaaaaa ;
}
.div3{
width : 600px ;
height : 100px ;
}
.div1{
float :left ;
width : 100px ;
height : 100px ;
background-color : bisque ;
}
.
div2{
float :left ;
width :calc(100% - 100px);
height : 100px ;
background-color : #aaaaaa ;
}
解决⽅案3---定位+margin：
.div3{
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
}
.div1{
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: bisque;        }
.div2{
margin-left: 100px;
height: 100px;
background-color: #aaaaaa;        }
解决⽅案4---定位+box-sizing：
.div3{
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
box-sizing: border-box;
padding-left: 100px;
}
.div1{
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: bisque;        }
.div2{
width: 100%;
height: 100px;
background-color: #aaaaaa;        }
如有其他更好的⽅案，不吝赐教~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。