`

圣杯布局

 
阅读更多

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，

 

 

最后的效果

Figure 5: the right column pulled 100% to the right

 

 

下面是全部的源代码：

 

<!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

 

分享到：
| 渐进增强式布局探讨（上）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics