[翻译]寻找圣杯 In Search of the Holy Grail(2)
作者:abdvl 来源:Alipay UED 时间:2008-11-12 13:10:00
原理
其实诀窍很简单,让左边栏与右边padding,右边栏与左边padding,中间刚好剩下自适应的内容层.
让我们一步一步来演示这个过程
第一步:创建父级容器
包括header, footer, and container.
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
我们让container(包容的容器)padding-left,padding-right,padding的值分别是左边栏和右边栏的值.
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
我们的布局大致是这样的:
第二步:添加栏
我们现在已经有了父级容器,现在来插入里面的三栏
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
现在我们要添加宽度和浮动属性以使他们在一行,并且在footer清除浮动
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
}
你会留意到中间的层已经和外面的层一样宽了(除去padding值的情况下),一会我们就可以看见所有的层都在一起并且也是100%宽。现在,层的顺序就是我们想要的顺序了,但是因为中间的层占据了100%的宽度,所以左边和右边的层就掉了下来。
标签:三栏,圣杯,负边距,css
0
投稿
猜你喜欢
SQL大讲堂:如何了解SQL的执行频率
2009-09-05 09:40:00
用YSlow评分插件分析我们页面
2008-08-26 11:48:00
Oracle9i 动态SGA,PGA特性探索
2009-04-24 12:39:00
div中class与id的区别及应用
2007-09-22 08:37:00
YUI学习笔记(1)
2009-01-12 18:06:00
oracle 日期函数
2010-07-23 13:32:00
CSS 超链接图标规范 V1.0
2007-12-28 12:05:00
如何在Access数据库中立即得到所插入记录的自动编号?
2010-06-17 12:45:00
ASP 常见的连接字符串写法(access2007)
2011-03-25 10:40:00
XMLHttp ASP远程获取网页内容代码
2011-04-10 10:41:00
新 API 寻求让 JavaScript 操作本地文件
2009-11-27 18:28:00
实例讲解实现SQL下的字符串拆分具体方法
2008-12-09 14:55:00
asp三天学好ADO对象之第一天
2008-10-09 12:46:00
9个Web设计中常见的可用性错误[译]
2009-03-11 20:25:00
游戏中的交互设计
2008-08-25 19:20:00
如何在网页中制作虚线表格
2010-10-20 20:07:00
常用于后台开发的jQuery插件
2010-09-25 12:47:00
判断sql语句执行是否成功
2008-07-05 12:22:00
手写个小组件(组件入门)asp版
2013-06-01 20:29:25
ASP实现多域名同一空间的处理实例
2008-10-29 09:46:00