三栏网页宽度自适应布局方法
来源:互联网 发布:詹姆斯数据统计 编辑:程序博客网 时间:2024/05/19 14:02
一、绝对定位法
html片段如下:
<div id="left">left</div> <div id="main">main</div> <div id="right">right</div>css片段如下:
html,body{padding:0;margin:0;} #left,#right{position:absolute;top:0;width:190px;height:200px;}#left{left:0;background-color: #0000FF;} #main{margin:0 200px;background-color: #ccc;height:200px;} #right{right:0;background-color: #FF0000;}思路:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。
二、双飞翼布局
HTML片段如下:
<div id="wrap"> <div id="main" class='col'><div class="mainIn">main</div> </div> <div id="left" class='col'>left</div> <div id="right" class='col'>right</div> </div>注意:主体main放置在最前面可以优先加载。mainln是为了处理main中内容的遮盖问题,只需设置它的左右外边距即可解决。CSS片段如下:
.col {float: left;height: 400px;}#main {width: 100%;background-color: #ccc;}.mainIn{margin: 0 150px 0 190px;}#left {width: 190px;margin-left: -100%;background-color: #0000FF;}#right {width: 150px;margin-left: -150px;background-color: #FF0000;}
三、圣杯布局HTML片段如下:
<div id="wrap"> <div id="main" class='col'>main</div> <div id="left" class='col'>left</div> <div id="right" class='col'>right</div> </div>CSS片段如下:
#wrap{padding: 0 150px 0 190px;}.col{position: relative;float: left;}#main{width: 100%;height: 400px;background-color: #ccc;}#left{width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}#right{width: 150px;height: 400px;margin-left: -150px;right: -150px;background-color: #FF0000;}两种布局的相同:三个col都设置float: left
,为了把left和right定位到左右部分,采用负边距,left部分margin-left: -100%
,right部分margin-left: -150px
。
两种布局的区别:相比圣杯布局,双飞翼不必设置左右栏的position: relative
,也不必设置左右left、right值,只需多添加一个子元素包含,相应的padding换成margin。圣杯布局和双飞翼布局的中间栏要放在文档流前面以优先渲染。
四、flex布局实现上面的效果
<div id="wrap"> <div id="left" class='col'>left</div> <div id="main" class='col'>main</div> <div id="right" class='col'>right</div> </div>#wrap{display:flex;}.col{height:400px;}#left{width: 190px;background-color: #0000FF;}#main{flex:1;background-color: #ccc;}#right{width: 150px;background-color: #FF0000;}
四种布局得到的效果:
阅读全文
0 0
- 三栏网页宽度自适应布局方法
- 三栏网页宽度自适应布局方法
- 三栏网页宽度自适应布局方法,margin负值法
- 三种三栏网页宽度自适应布局方法
- 三种三栏网页宽度自适应布局方法
- 三种三栏网页宽度自适应布局方法
- 从网上学习的网页宽度自适应布局方法
- 我熟知的三种三栏网页宽度自适应布局方法
- 三栏自适应布局实现(左右固定宽度,中间自适应)
- 三栏自适应布局方法
- CSS三栏布局(两边固定中间自适应宽度)的方法
- CSS三栏布局(两边固定中间自适应宽度)的方法
- CSS三栏布局(两边固定中间自适应宽度)的方法
- 实现一个三栏布局的网页,中间部分要自适应宽度并且优先加载,兼容IE&FF&Chrome。
- 三栏布局,自适应宽度,中间优先加载
- ABC三栏布局,AC固定宽度,B自适应
- html--三栏布局(两边固定宽度,中间自适应)
- 三列布局中间列宽度自适应
- 使用eclipse制作war包方法
- Git使用文档(张高伟)
- ElasticSearch建立索引报错
- 设计模式-Builder模式
- 直播-拉流和推流概述 转载
- 三栏网页宽度自适应布局方法
- J2EE系列之MyBatis学习笔记(五)-- mybatis关系映射(一对多映射)
- linux中批量修改文件名/文件内容(rename sed)
- svm:简介及总结
- 在大公司工作3年以上的人,如何摆脱螺丝钉的现实?
- HiWATER
- 深入浅出UE4网络
- 信息批量提取工具bulk-extractor
- ss-libev 源码解析local篇(4): server_recv_cb之STAGE_STREAM