html div自适应布局 css两个div自适应宽度布局方法大全（精华）

第一种方法：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);/*计算宽度*/}

如果觉得《html div自适应布局 css两个div自适应宽度布局方法大全（精华）》对你有帮助，请点赞、收藏，并留下你的观点哦！