CSS三栏布局的四种方法
来源:互联网 发布:magics软件介绍 编辑:程序博客网 时间:2024/04/30 00:35
1.绝对定位法
HTML代码如下:
<div class=”left”>Left</div>
<div class=”main”>Main</div>
<div class=”right”>Right</div>
CSS代码如下:
//简单的进行CSS resetbody,html{ height:100%; padding: 0px; margin:0px;
}
//左右绝对定位.left,.right{ position: absolute; top:0px; background: red; height:100%;
}.left{ left:0; width:100px;
}.right{ right:0px; width:200px;
}
//中间使用margin空出左右元素所占据的空间.main{ margin:0px 100px 200px 0px; height:100%; background: blue;
}
该方法有个明显的缺点,就是如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。
2. 圣杯布局
HTML代码如下:
//注意元素次序
<div class=”main”>Main</div>
<div class=”left”>Left</div>
<div class=”right”>Right</div>
CSS代码如下:
//习惯性的CSS resetbody,html{ height:100%; padding: 0; margin: 0}
//父元素body空出左右栏位body { padding-left: 100px; padding-right: 200px;
}
//左边元素更改.left { background: red; width: 100px; float: left; margin-left: -100%; position: relative; left: -100px; height: 100%;
}
//中间部分.main { background: blue; width: 100%; height: 100%; float: left;
}
//右边元素定义.right { background: red; width: 200px; height: 100%; float: left; margin-left: -200px; position: relative; right: -200px;
}
相关解释如下:
(1)中间部分需要根据浏览器宽度的变化而变化,所以要用100%,这里设左中右向左浮动,因为中间100%,左层和右层根本没有位置上去
(2)把左层margin负100后,发现left上去了,因为负到出窗口没位置了,只能往上挪
(3)按第二步这个方法,可以得出它只要挪动窗口宽度那么宽就能到最左边了,利用负边距,把左右栏定位
(4)但由于左右栏遮挡住了中间部分,于是采用相对定位方法,各自相对于自己把自己挪出去,得到最终结果
3. 双飞翼布局
HTML代码如下:
<div class=”main”>
<div class=”inner”> Main
</div>
</div>
<div class=”left”>Left</div>
<div class=”right”>Right</div>
CSS代码如下:
//CSS resetbody,html { height:100%; padding: 0; margin: 0}body { /*padding-left:100px;*/
/*padding-right:200px;*/}.left { background: red; width: 100px; float: left; margin-left: -100%; height: 100%; /*position: relative;*/
/*left:-100px;*/}.main { background: blue; width: 100%; float: left; height: 100%;
}.right { background: red; width: 200px; float: left; margin-left: -200px; height: 100%; /*position:relative;*/
/*right:-200px;*/}
//新增inner元素.inner { margin-left: 100px; margin-right: 200px;
}
圣杯布局实际看起来是复杂的后期维护性也不是很高,在淘宝UED的探讨下,出来了一种新的布局方式就是双飞翼布局,代码如上。增加多一个div就可以不用相对布局了,只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。
4. 浮动
HTML代码如下:
//注意元素次序
<div class=”left”>Left</div>
<div class=”right”>Right</div>
<div class=”main”>Main</div>
CSS代码如下:
//CSS resetbody,html { height:100%; padding: 0; margin: 0}
//左栏左浮动.left { background: red; width: 100px; float: left; height: 100%;
}
//中间自适应.main { background: blue; height: 100%; margin:0px 100px 200px 0px;
}
//右栏右浮动.right { background: red; width: 200px; float: right; height: 100%;
}
这种方式代码足够简洁与高效,也容易理解
- CSS三栏布局的四种方法
- CSS三栏布局的四种方法
- CSS三栏布局方法
- CSS floats来创建三栏网页布局的方法
- CSS floats来创建三栏网页布局的方法
- html+css三栏布局-浮动方法
- CSS实现中间自适应的三栏布局,共4种方法
- CSS三栏布局
- html+css布局的三种方式
- html+css布局的三种方式
- 三列布局的三种方法
- 用CSS的float和clear创建三栏液态布局的方法
- 用CSS的float和clear创建三栏液态布局的方法
- 用CSS的float属性创建三栏布局网页的方法
- DIV+CSS创建三栏网页布局方法介绍
- CSS三栏布局(两边固定中间自适应宽度)的方法
- CSS三栏布局(两边固定中间自适应宽度)的方法
- CSS三栏布局(两边固定中间自适应宽度)的方法
- 操作系统及内核
- python学习笔记(30)--元编程1-装饰器
- java web 解决中文乱码问题(全面总结)
- 十进制转二进制(栈)
- NLP+词法系列(二)︱中文分词技术简述、深度学习分词实践(CIPS2016、超多案例)
- CSS三栏布局的四种方法
- 第一天学习python
- guardprocess
- 如何考察求职者的「学习能力」?
- LVS
- Office 2016激活教程(附KMS激活软件)
- Linux图形化监控工具-nmon
- Python10
- 树形DP-HDU1520