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%; back