loading...

2

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

css读完大概需要5分钟

  • 发布时间:2017-08-04 11:50 星期五
  • 刘伟波
  • 177
  • 更新于2017-08-04 11:50 星期五

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


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 segmentfault平台, 也可以来我的直播间来提问。
    关于技术问题或者有啥不懂的都可以留言, 我会定期回复答疑, 也可以来 我的直播间 提问, 推荐最新仓库 前端知识体系, 感謝支持!