实际项目开发过程中遇到页面 DIV 左右布局的需求:左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面,由此引申出本文的几种解决方案
1 左侧 DIV 设置 float
属性为 left
,右侧 DIV 设置 margin-left
属性等于或大于左侧 DIV 宽度
Insert title here
实际效果:
2 左侧 DIV 设置 float
属性为 left
,负边距 100%,右侧 DIV 中嵌套一个 DIV,页面内容放入嵌套的 DIV 中,右侧内嵌 DIV 设置 margin-left
属性等于或大于左侧 DIV 宽度
Insert title here
实际效果:
3 如果将需求修改为右侧固定宽度而左侧自适应宽度
Insert title here
实际效果: