左侧固定宽度，右侧随浏览器自适应宽度的布局在后台框架、左图右文的样式中经常用到。
左边固定200PX，右侧宽度随浏览器缩放自动调整大小，我的站长站分享几种实现方法，代码尽量精简，只留关键代码。
方法1、左浮动，右margin-left
比较推荐的方法，兼容性高，代码也最简单好理解。
.left{
float: left;
width: 200px;
}
.right{
margin-left:200px;
word-break: break-all;
}方法2、左浮动，右边overflow
这种方法IE6下不兼容
left{
float: left;
width: 200px;
}
.right{
overflow: hidden;
word-break: break-all;
}方法3、左绝对定位，右margin-left
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.right{
margin-left:200px;
word-break: break-all;
}方法4、左右都用绝对定位
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.right{
position: absolute;
left: 200px;
top:0;
word-break: break-all;
}
相关专题
- 浏览器如何模拟测试不同分辨率的网页效果 [2023-09-15]
- statcounter全球浏览器市场份额统计工具 [2023-09-15]
- TabCopy网站名称+网址快速批量复制谷歌浏览器插件V3.5 [2023-09-03]
- 服务器自带IE浏览器提示添加网址到受信任站点取消方法 [2023-08-29]
- 谷歌浏览器右键翻译失效修复工具 [2023-07-11]
