htmldiv⾃适应布局,css两个div⾃适应宽度布局⽅法⼤全（精
华）
第⼀种⽅法：BFC块级格式化上下⽂
-----左边固定宽度-----
----------------------------------------右边⾃适应宽度----------------------------------------
.container1{ width:100%; height:100px; border:1px solid red;}css布局左边固定右边自适应
.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);/*计算宽度*/}

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