• 欢迎访问少将博客,学会感恩,乐于付出,珍惜缘份,成就彼此、推荐使用最新版火狐浏览器和Chrome浏览器访问本网站。
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏少将博客吧
  • 欢迎加博主微信:jiang_shaobo

左边固定,右边自适应及左边自适应,右边固定布局的几种方法

点滴 admin 4年前 (2015-04-02) 232次浏览 已收录 0个评论 扫描二维码

自适应布局在现在的布局中,很容易遇见,下面是在平时工作中对左边固定,右边自适应及左边自适应,右边固定布局的几种方法的一些总结,希望能帮到大家,如果大家有更多更好的意见,欢迎补充!


页面布局如下:
左边固定,右边自适应及左边自适应,右边固定布局的几种方法
一、左边固定,右边自适应的布局
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;
}

效果图如下:

左边固定,右边自适应及左边自适应,右边固定布局的几种方法

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

可以参考下,

另外可以参考下大前端的模版,比较理想的效果。

其中一个站点,在SAE里面,速度慢。www.leyiwo.com


喜欢 (0)
[🍬谢谢你请我吃糖果🍬🍬~]
分享 (0)
关于作者:
少将,关注Web全栈开发、项目管理,持续不断的学习、努力成为一个更棒的开发,做最好的自己,让世界因你不同。
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址