两栏布局方案汇总

记录下常见的两栏布局方式。

左边定宽,右边自适应

模拟table

父元素 display: table ,子元素左右 table-cell ,左边定宽。

左浮 + 右Margin

子元素的左边浮动脱标,右边设置 margin-left: 左边元素宽度

左浮 + 右BFC

子元素左边设置浮动+定宽,右边子元素设置 overflow: hidden 触发自身BFC

子绝父相

子绝父相,左边 top, left: 0,右边 top, right: 0,left等于左边宽度。

flex布局

父元素 display: flex ,左边定宽,右边 flex: 1