html--三栏布局(两边固定宽度,中间自适应)
来源:互联网 发布:图片转表格软件 编辑:程序博客网 时间:2024/05/18 03:29
一、绝对定位法:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
#left{ width: 180px; height: 100%; background: blue; position: absolute; left: 0px; top: 0px; } #middle{ background: red; margin: 0 200px; height: 100%; } #right{ width: 180px; background: blue; position: absolute; right: 0px; top: 0px; height: 100%; }
此方法的优点在于:理解容易,上手简单,受内部元素影响而破坏布局的概率低,就是比较经得起折腾。
缺点在于:如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况
二、自身浮动法:左栏左浮动,右栏右浮动,中间栏放最后。
#left{ width: 180px; height: 100%; background: blue; float: left; } #middle{ background: red; margin: 0 200px; height: 100%; } #right{ width: 180px; height: 100%; background: blue; float: right; }
这种方式需要注意三个div的顺序,左右两栏的顺序不分先后,但是中间一栏必须放在最后。
此方法的优点是:代码足够简洁与高效
缺点是:中间主体存在克星,clear:both属性。如果要使用此方法,需避免明显的clear样式。
三、margin负值法:左右两栏均左浮动,左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。
#middle{ width: 100%; float: left; } #main{ background: red; margin: 0 200px; height: 100%; } #left{ width: 200px; float: left; margin-left: -100%; height: 100%; background:blue; } #right{ width: 200px; float: left; margin-left: -200px; height: 100%; background:blue; }
此方法的优点在于:三栏相互关联,可谓真正意义上的自适应,有一定的抗性——布局不易受内部影响。
缺点在于:相对比较难理解些,上手不容易,代码相对复杂。出现百分比宽度,过多的负值定位,如果出现布局的bug,排查不易。
第一种和第二种方法的div排版<div id="middle"></div><div id="left">xsxsx</div><div id="right">xsxsx</div>
第三种方法的div排版<div id="middle"> <div id="main">aaaaaaaaa</div> </div> <div id="left">vvvvvvvvvvv</div> <div id="right">ccccccccccccc</div>
1 0
- html--三栏布局(两边固定宽度,中间自适应)
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
- CSS三栏布局(两边固定中间自适应宽度)的方法
- CSS三栏布局(两边固定中间自适应宽度)的方法
- CSS三栏布局(两边固定中间自适应宽度)的方法
- 三栏布局(两边固定,中间自适应)
- 三栏布局(两边固定,中间自适应)
- CSS三栏布局——中间固定两边自适应宽度
- CSS三栏布局——中间固定两边自适应宽度
- 如何实现两边固定,中间自适应的三栏布局?
- 两边宽度固定 中间自适应
- html中散列布局的实现,中间自适应大小,两边固定宽度
- 三栏自适应布局实现(左右固定宽度,中间自适应)
- 中间固定,两边自适应的三列布局、两边固定,中间自适应的三列布局、左侧栏固定,右侧自适应的两列布局
- css中间固定宽度,两边自适应宽度
- 三列布局(左右固定宽度,中间自适应)
- 纯CSS实现三列布局(两边固定,中间自适应)
- 二次型如何快速转化为矩阵?
- 上传自己的库到github并作为依赖
- 理解RESTful架构
- iOS内存分区
- sigslot库源码分析
- html--三栏布局(两边固定宽度,中间自适应)
- ios-单例和通知传值
- hdu 2159 FATE(完全背包)
- llinux -c 之动态内存分配函数(malloc、calloc、realloc)
- md5sum命令常用工具命令
- 第十二周利用参数宏进行角度与弧度转换
- 11gr2 alert日志中报TNS-12535 TNS-00505原因及解决方法
- 在 OpenEmbedded 开发框架中配置 Qt5
- Java子类继承父类,静态代码块、普通代码块、构造代码块的执行顺序