CSS实现三栏式布局

三栏式布局

要求：左右两栏宽度固定，中间一栏根据父元素宽度填充满，父元素高度取决于三个子元素中最高的高度。

采用两种方法用CSS实现了三栏式布局，下面分别介绍一下这两种方法

方法一：

• 左列：float:left；
  
• 右列：float:right;
  
• 中间列：margin-left:左宽度，margin-right:右宽度；
• 父元素：overflow:hidden(清除浮动)
• 详细代码如下

#container{
	border:1px solid #999;
	background:#eee;
	padding:20px;
	overflow:hidden;
}
/*左边*/
#container .left{
	float:left;
	width:160px;
	background:#fff;
	border:1px solid #999;
}
/*右边*/
#container .right{
	float:right;
	background:#fff;
	width:120px;
	border:1px solid #999;	
}
/*中间自适应部分*/
#container  .center{
	border:1px solid #999;
	background:#fff;
	
	/*为了使中间自适应*/
	margin-left:160px;
	margin-right:120px;
}

方法二：又称为双飞翼布局

• 父元素：overflow:hidden;
• 中间列：float:left; width:100%; padding:0 220px 0 190px;
• 左列： float:left; width:190px;   margin-left:-100%(使其移动到上一行的最左边);  position:relative;left:-190px;
• 右列： float:left; width:220px;   margin-left:-220px(使其移动到上一行的最右边);  position:relative;right:-220px;
• 详细代码如下

.left {       
   float: left;        
   width: 190px;   
   background:red;
   
   margin-left:-100%;
   
   position:relative;
   left:-190px;
   
}   

.right {        
	float:left;        
	width: 220px;	
	background:blue;
	
	margin-left:-220px;
	
	position:relative;
	right:-220px;
 }
 
 .center {        
   float: left;      
   width: 100%; 
   background:green; 
 } 
 
#container{
	padding:20px 220px 20px 190px;
	overflow:hidden;
	border:1px solid #999;
}

两种方法的区别

• 由于方法二三列全使用float定位，当浏览器缩小到一定范围，三列布局会变为两列甚至一列
• 而方法一中，中间列未采用float定位，所以无论浏览器怎么缩小，仍然是三列布局，只是中间列的宽度会越来越窄。

 CSS中：position的取值及各自定位方式

• static：

  元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

• relative:

  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。不会脱离文档流，相对于元素原来的正常位置进行定位

• absolute：

  元素框从文档流完全删除，即：脱离了文档流。
  绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
  元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样 。
  元素定位后生成一个块级框，而不论原来它在正常流中是何种类型的框。
  

• fixed：

  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
  即：元素脱离文档流，相对于浏览器视口进行定位。