CSS 布局实现左边固定宽度，右边占满剩余宽度

html-css024

CSS 布局实现左边固定宽度，右边占满剩余宽度,第1张

浮动是最普遍实现的方式，但 css 浮动的初衷并不是用于布局的，所以浮动布局迟早会被淘汰，应该作为备选方式使用。

绝对定位方式有个缺点，当左边高于右边时，左边会超出父元素，需要使用 js 补救。

flex 是最鼓励使用的方式，低端 IE 不支持，但在移动端得到了广泛的使用。

直接给你写个示例

<div style=" float:left width:200px height:400px background:red color:white">左边宽度固定</div>

 <div style=" height:400px background:blue color:white margin-left:200px">右边宽度自动</div>