左边固定，右边自适应及左边自适应，右边固定布局的几种方法
2023-09-18 21:51:41 作者：网友推荐 评论：141阅读(6)
《左边固定，右边自适应及左边自适应，右边固定布局的几种方法》正文开始，本次阅读大概10分钟。
前些天发布过一篇《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;}效果图如下：
上面的方法在各浏览器的测试中，都能兼容！
【声明】：本博客不参与任何交易，也非中介，仅记录个人感兴趣的内容，内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客，即表示您已经知晓并接受了此声明通告。本博客资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。如果本文导致的版权问题以及内容纠错问题请联系站长QQ:1004619 |
点此给我发送邮件 本文标题：
左边固定，右边自适应及左边自适应，右边固定布局的几种方法 本文地址：
https://www.1004619.com/nn/zbgdybzsyjzbzsyybgdbjdjzff.html
Villain博客
