[翻译]寻找圣杯 In Search of the Holy Grail（2）
作者：abdvl 来源：Alipay UED 发布时间：2008-11-12 13:10:00
标签：三栏,圣杯,负边距,css
原理
其实诀窍很简单，让左边栏与右边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％的宽度，所以左边和右边的层就掉了下来。
0
投稿猜你喜欢
- 假设有一名为"addnewuser"的存储过程，其内容如下：Create PROCEDURE dbo
- 这篇文章主要介绍了Python argparse模块应用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
PHP getNamespaces() 函数实例返回 XML 文档中使用的命名空间：<?php $xml=<<<XM- XML同HTML一样，都来自Standard Generalized Markup Language, 即标准通用标记语言，简称SGML。早
- 每个存储过程都有默认的返回值，默认值为0。下面我们分别看看在management studio中如何查看输出参数，返回值以及结果集，然后我们
- 本文使用的是163邮件进行测试。注：163邮箱现在需要使用 客户端授权码 进行测试，不再支持邮箱密码进行测试。
- python的便利性，使得如今许多软件开发者、黑客都开始使用python打包成exe的方式进行程序的发布，这类exe有个特点，就是可以使用反
- 如果是报名培训班的话，学习的速度可能会更快一些，毕竟是自己花钱了。自学python爬虫方法：首先要掌握一些有关爬虫的基础知识，基本的要知道什
- 1.设置phpMyAdmin Language:Chinese simplified (zh-utf-8)MySQL 字符集：UTF-8 U
- HTML文档与CSS的关联常见有4种方式：1.使用link标记<link rel="stylesheet"
- 钉钉开放平台传送门：https://open.dingtalk.com我司使用钉钉作为内部通讯工具，基本上大家在电脑和手机上都开着，消息可以
- 漏洞的产生原因代码层过滤不严。应用程序直接或间接使用了动态执行命令的危险函数，并且这个函数的运行参数是可控的系统的漏洞造成命令注入漏洞的本质
- 在做项目时发现,很多场合都可能用到Input但又想让它具有select的特性,研究了一下,似乎可以实现,下面的代码可以大概说明我的意图,但实
- JS高级 一、JS的数据类型 1.基本类型 JS共有5大基本类型，分别是： 1）Undefined。他只有一个值：undefined。如果一
- 大家好，我是启航。本文将给大家分享一个实用的Python办公自动化脚本 「利用Python批量翻译英文Word文档并保留格式」，最终效果甚至
- 什么是deferdefer用来声明一个延迟函数，把这个函数放入到一个栈上， 当外部的包含方法return之前，返回参数到调用方法之前调用，也
- 引言安装或者更新完pytorch后，运行不了，显示错误：(base) xu@xusu:~$ pythonPython 3.7.1 (defa
- 本文实例讲述了Python面向对象程序设计。分享给大家供大家参考，具体如下：示例1：#encoding:utf-8''
- CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。常见兼容问题：1、DOCTY
- 之前遇到一个场景是这样的：我在自己的电脑上需要用mongodb图形客户端，但是mongodb的服务器地址没有对外网开放，只能通过先登录主机A
