CSS-左边定宽,右边自适应布局方案

1.左边设置左浮动,右边宽度设置为100%

.left{
        float: left;
}
.right{
        width: 100%;
}

2.左边设置左浮动,右边设置margin-left

.left{
        float: left;
 }
.right{
        margin-left: 200px;
 }
3.左边设置左浮动,右边设置右浮动+calc

.left{
      float: left;
}
.right{
      width: calc(100vw - 200px);//或者为:width: calc(100% - 200px);

      float: left;
}
注:100vw=viewport width;  100vh=viewport height

4.父容器设置display:flex,右边设置flex:1

.parent{
	display: flex;
}
.right{
        flex: 1;
}
注:父容器设为弹性盒子,子元素通过设置flex的数值来控制所占空间的比例。








你可能感兴趣的:(css)