原文地址:http://www.alistapart.com/articles/holygrail
实践了一下;
<div id=”header”></div>
<div id=”container”>
<div id=”center”></div>
<div id=”left”></div>
<div id=”right”></div>
</div>
<div id=”footer”></div>
CSS:
body{min-width:550px;margin:0px;padding:0px}
#container{
padding-left:200px;
padding-right:150px;
}
#container .column{
position:relative;
float:left;
}
#center{
width:100%;
background:#ccc;
}
#left{
width:200px;
background:red;
margin-left:-100%;
right:200px;
}
#right{
width:150px;
background:blue;
margin-right:-150px;
}
#footer{
clear:both;
background:#000;
}
/*** IE6 Fix***/
* html #left{left:150px;}
/*** IE7 Fix***/
*:first-child+html #left{left:150px}
这样能实现最简单的三栏布局,并且三栏的高度自适应,根据里面的内容来定。最后是对IE6和IE7的修复.
如果想实现三栏一样高,并且加上padding,使得页面更加美观,那么需要这样写css。
body{min-width:630px;margin:0px;padding:0px}
#container{padding-left:200px;padding-right:190px;overflow:hidden;}
#container .column{padding-bottom:20010px;margin-bottom:-20000px;
position:relative;float:left;}
#center{padding:10px 20px;width:100%;background:#ccc;}
#left{width:180px;padding:0 10px;background:red;margin-left:-100%;right:240px;}
#right{width:130px;padding:0 10px;background:blue;margin-right:-190px;}
#footer{clear:both;background:#000;}
/*** IE6 Fix***/
* html #left{left:150px;}
* html body{overflow:hidden;}
* html #footer-wrapper{
float:left;
position:relative;
width:100%;
padding-bottom:10010px;
margin-bottom:-10000px;
background:#fff
}
/*** IE7 Fix***/
*:first-child+html #left{}
*:first-child+html body{overflow:hidden;position:relative}
*:first-child+html #footer-wrapper{
float:left;
position:relative;
width:100%;
padding-bottom:10010px;
margin-bottom:-10000px;
background:#fff;
}
ie6,ie7下总是有很多问题需要单独解决。。
这也只是实践 ,还有很多问题没搞明白,最后IE7的修复是自己实践的结果。
分享到:
相关推荐
圣杯布局代码分享
简易版圣杯布局,实现高度自适应,左右宽度固定,中间宽度也是自适应。
适合前端新手小白的布局方面小技巧,内容主要为利用元素定位和浮动方面的知识实现圣杯布局、双飞翼布局、黏连布局、伪等高布局等,解决浮动元素高度失效和相邻垂直外边距重叠问题,同时还解决ie6下fixed失效问题。
圣杯布局这是圣杯布局
圣杯布局
圣杯布局实现思路1
css三角形、居中、圣杯布局
前端常用两种布局方式:双飞翼布局以及圣杯布局
HTML代码描述如何在网页中制作简单的网页布局,代码简单,便于理解。
双飞翼布局和圣杯布局 网页开发中,经常会遇见左中右垂直三栏的布局方式,两侧结构宽度固定,中间自适应,有时候需要优先加载中间区域,那么便在DOM结构上便有所要求,需要中间区域在前,左右区域在后。 首先三...
圣杯布局和双飞翼布局 (典型的面试题:加载逻辑) 两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,中间部分在DOM结构上优先,以便先行渲染。(核心目的:先解析中间栏,展示当前页面的...
圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局,感兴趣的朋友一起学习吧
说起网站布局,之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样,把各种需要的组件一摆,然后设个宽高给个定位不就...而今天我们的主题,“双飞翼布局”与“圣杯布局”就是一个两边固定,中间宽度自适应,并
双飞翼布局和圣杯布局都是实现两边固定中间自适应的三栏布局的方式,最近在整理三栏布局实现方式的笔记,决定但拉出来一篇,记一下这两个经典布局。 1、圣杯布局 浮动、负边距、相对定位、不添加额外标签 效果图 ...
圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。