1、首先我们需要一个简单的html结构来完成我们的的实验
标准的3列的布局模式，左边列（left column） 的宽度是200px，右边宽度的是150px ，中间的宽度是100%
<body>
<div id="head">
<h1>head</h1>
</div>
<div id="container">
<div id="center" class="column">
center
</div>
<div id="left" class="column">
left
</div>
<div id="right" class="column">
right
</div>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
2、我们开始对页面进行布局
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
让container左边和右边空出200px，150px
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
}
这里设置的center 的宽度为了100%不包括padding，让left div的宽度和我们上面在container流出的左边的padding一致。
#left {
width: 200px; /* LC width */
margin-left: -100%;
right: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
让左边的div移动到左上角。右边的div移动到右上角
3、修复ie6下的bug
* html #left {
left: 150px; /* RC width */
}
在ie6下，会出现看不到左边的div，
最后的效果
下面是全部的源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css 布局</title>
<style type="text/css">
body{
min-width: 988px;
}
#head{
text-align: center;
}
#container{
padding-left: 200px; /*left column width*/
padding-right: 150px; /*right column width*/
overflow: hidden;
}
#container .column{
position: relative;
float: left;
}
#center{
background:#eee;
padding: 10px 20px;
margin: 0 15px;
width: 100%;
min-height: 300px;
overflow:visible;
}
#left{
width:180px;
background:green;
margin-left:-100%;
right: 270px; /*180+60(padding total)+ 30(margin)*/
padding:0 10px; /* LC fullwidth + CC padding */
min-height: 300px;
}
#right{
width: 130px;
background:yellow;
padding: 0 10px;
margin-right: -240px; /*fullwidth + center column padding 尽量大一点，chrome浏览器下，这个div浮动不上来*/
min-height: 300px;
}
#footer{
clear: both;
text-align: center;
}
/*IE6 fix*/
* html #left {
left:100px;
}
</style>
</head>
<body>
<div id="head">
<h1>head</h1>
</div>
<div id="container">
<div id="center" class="column">
center
</div>
<div id="left" class="column">
left
</div>
<div id="right" class="column">
right
</div>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
</html>
参考： http://www.alistapart.com/articles/holygrail
分享到：
相关推荐
圣杯布局代码分享
简易版圣杯布局，实现高度自适应，左右宽度固定，中间宽度也是自适应。
适合前端新手小白的布局方面小技巧，内容主要为利用元素定位和浮动方面的知识实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等，解决浮动元素高度失效和相邻垂直外边距重叠问题，同时还解决ie6下fixed失效问题。
圣杯布局
圣杯布局的特点在于它首先解析中间的`center`部分，然后通过浮动和负边距以及定位来实现三栏布局。具体步骤如下： 1. **结构优先**：HTML结构中，`center`元素位于最前，紧随其后的是`left`和`right`。 2. **无重叠...
css三角形、居中、圣杯布局
圣杯布局（Holy Grail Layout）是前端开发中一种经典的网页布局方式，旨在实现页面的三栏布局，其中左右两栏宽度固定，中间栏宽度自适应，并且在浏览器的初始加载时，中间栏应首先显示，提供良好的用户体验。...
圣杯布局实现思路1
双飞翼布局与圣杯布局是网页开发中两种常见的三栏布局方式，它们的主要目标是实现两侧栏宽度固定，中间栏宽度自适应，并且在页面加载时优先展示主要内容，提高用户体验。这两种布局方法都考虑了不同分辨率设备上的...
前端常用两种布局方式：双飞翼布局以及圣杯布局
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...
双飞翼布局和圣杯布局 网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。 首先三...
HTML代码描述如何在网页中制作简单的网页布局，代码简单，便于理解。
在CSS布局中，双飞翼布局和圣杯布局都是常见的两列或三列布局方法，尤其适用于网页的头部、尾部和主体内容的布局。这两种布局方式都能够实现两侧固定宽度，中间自适应宽度的布局需求，即两边的列宽度固定，而中间的...
"圣杯布局"和"双飞翼布局"是两种常见的前端开发技术，主要用于实现三栏式布局，其中两边固定宽度，中间区域自适应。这两种布局模式都是为了在浏览器窗口大小变化时保持页面结构的稳定性和良好的用户体验。 **圣杯...