第一种方法:BFC块级格式化上下文
-----左边固定宽度---------------------------------------------右边自适应宽度----------------------------------------
.container1{ width:100%; height:100px; border:1px solid red;}
.left1{ float:left; margin-right:20px; width:200px; height:100%; background:yellow;}
.right1{ overflow:hidden; height:100%; background:blue;}
左边div浮动元素可以不设置具体宽度,配合margin-right和overflow:hidden。右边div仍然可以自适应宽度。
第二种方法:左浮动 + margin-left布局
-----左边固定宽度---------------------------------------------右边自适应宽度----------------------------------------
.container2{ width:100%; height:100px; border:1px solid red;}
.left2{ float:left; margin-right:20px; width:200px; height:100%; background:yellow;}
.right2{ margin-left:20px; height:100%; background:blue;}
第三种方法:flex布局
-----左边固定宽度---------------------------------------------右边自适应宽度----------------------------------------
.container3{ width:100%; height:100px; border:1px solid red; display:flex;/*设为伸缩容器*/}
.left3{ width:200px; height:100%; background:yellow;}
.right3{ height:100%; background:blue; flex:1;/*设为占比1,填充满剩余空间*/}
第四种方法:div模拟table布局
-----左边固定宽度---------------------------------------------右边自适应宽度----------------------------------------
.container4{ width:100%; height:100px; border:1px solid red; display:table;/*模拟table*/}
.left4{ width:200px; background:yellow; display:table-cell;/*模拟table*/}
.right4{ background:blue; display:table-cell;/*模拟table*/}
第五种方法:calc计算宽度布局
-----左边固定宽度---------------------------------------------右边自适应宽度----------------------------------------
.container5{ width:100%; height:100px; border:1px solid red;}
.left5{ float:left; width:200px; height:100%; background:yellow;}
.right5{ float:left; height:100%; background:blue; width:calc(100% - 200px);/*计算宽度*/}