记录下常见的两栏布局方式。
左边定宽,右边自适应
模拟table
父元素 display: table
,子元素左右 table-cell
,左边定宽。
左浮 + 右Margin
子元素的左边浮动脱标,右边设置 margin-left: 左边元素宽度
左浮 + 右BFC
子元素左边设置浮动+定宽,右边子元素设置 overflow: hidden
触发自身BFC
子绝父相
子绝父相,左边 top, left: 0
,右边 top, right: 0
,left等于左边宽度。
flex布局
父元素 display: flex
,左边定宽,右边 flex: 1
。