左边固定,右边自适应及左边自适应,右边固定布局的几种方法
来源:互联网 发布:认知计算与人工智能pdf 编辑:程序博客网 时间:2024/04/28 08:39
左边固定,右边自适应及左边自适应,右边固定布局的几种方法
(2014-01-27 11:02:00)标签:
左边固定右边自适应布
右边固定左边自适应布
it
分类: DIV CSS自适应布局在现在的布局中,很容易遇见,下面是在平时工作中对左边固定,右边自适应及左边自适应,右边固定布局的几种方法的一些总结,希望能帮到大家,如果大家有更多更好的意见,欢迎补充!
#lt{ float: left;width:200px; background: #ff0;} #rt{ overflow: hidden; background: #f0f;}
#lt{ float: left; width:200px; background: #ff0;} #rt{ margin-left: 200px; background: #f0f;}
#lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;} #rt{ margin-left: 200px; background: #f0f;}
#lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;} #rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}
#lt{float:left; width:100%;background: #00f;margin-right: -200px;} #rt{float: right; width: 200px;background: #ff0;}
#lt{margin-right:200px; background: #00f;} #rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}
#lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;} #rt{ position: absolute; top:0; left:200px; width:200px; background: #ff0;}
页面布局如下:
一、左边固定,右边自适应的布局
1. 左边左浮动,右边加个overflow:hidden;
2. 左边左浮动,右边加个margin-left;
3. 左边绝对定位,右边加个margin-left;
4. 左右两边绝对定位,右边加个width,top,left,right
效果图如下:
二、右边固定,左边自适应的布局
1. 左边左浮动,margin-left负值,右边右浮动;
2. 右边绝对定位,左边margin-right;
3. 左右两边绝对定位,左边加个width,top,left,right
效果图如下:
上面的方法在各浏览器的测试中,都能兼容!
0 0
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- 几种左边固定右边自适应的左右布局方式
- 左边固定200px,右边自适应的几种方法
- 左边固定 右边自适应
- 双栏布局的几种方法:左边固定,右边自适应
- 网页布局---左边固定右边自适应
- CSS右边固定左边自适应布局
- 实现左边固定宽度右边自适应布局
- 双栏布局 左边固定右边自适应
- 左边固定宽度右边自适应的三种方法
- 左边宽固定,右边自适应
- css左边固定,右边自适应
- 左边固定宽度右边自适应
- 两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)
- python 常用概念
- FX2N连接扫码抢
- Unable to find method 'org.gradle.api.tasks.TaskInputs.file(Ljava/lang/Object;)
- Micropython加速物联网开发1
- 关于格式化输出各类型的说明(format、printf)
- 左边固定,右边自适应及左边自适应,右边固定布局的几种方法
- Logistic回归详解及案例
- 简单理解socket
- activeMQ 使用场景
- 集成TBS腾讯浏览服务X5内核的Webview
- Array Partition I
- Google浏览器Chrome安装失败,错误代码0xa0430721解决办法
- CEF + VS2015开发环境搭建
- Linux CentOS 5 防火墙