左边固定，右边自适应及左边自适应，右边固定布局的几种方法_CSS学习

资料来源：网络整理时间：2023/3/4 0:56:16 共计：3596 浏览

前些天发布过一篇《CSS：左侧栏固定宽度，右侧栏自适应宽度》的文章，今天再继续分享下更全更简单的方法！

页面布局如下：
一、左边固定，右边自适应的布局
1. 左边左浮动，右边加个overflow:hidden;   #lt{ float: left;width:200px; background: #ff0;}   #rt{ overflow: hidden; background: #f0f;}
2. 左边左浮动，右边加个margin-left;   #lt{ float: left; width:200px; background: #ff0;}   #rt{ margin-left: 200px; background: #f0f;}
3. 左边绝对定位，右边加个margin-left;   #lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}   #rt{ margin-left: 200px; background: #f0f;}
4. 左右两边绝对定位，右边加个width,top,left,right   #lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}   #rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}
效果图如下：
二、右边固定，左边自适应的布局
1. 左边左浮动，margin-left负值,右边右浮动;   #lt{float:left; width:100%;background: #00f;margin-right: -200px;}   #rt{float: right; width: 200px;background: #ff0;}
2. 右边绝对定位，左边margin-right;   #lt{margin-right:200px; background: #00f;}   #rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}
3. 左右两边绝对定位，左边加个width,top,left,right   #lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;}   #rt{ position: absolute; top:0; left:200px; width:200px; background: #ff0;}
效果图如下：

上面的方法在各浏览器的测试中，都能兼容！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS:父子标签间的间隔建议用padding，兄弟标签间用margin_CSS学习 | ·下一条：display:inline-block替代float后产生间隔4px的终极解决办法_CSS学习