CSS三栏式布局

1、右侧固定宽度，左侧自适应

方法一：左侧设置margin-right为右侧的宽度，右侧设置float：right  

<!doctype html>
<html>	
<head>		
<style type="text/css">		
#left{			
height:300px;			
margin-right:300px;			
background:#DDD;		
}		
#right{			
width:500px;			
height:300px;			
float:right;			
background:#AAA;		
}		
</style>	
</head>	
<body>		
<div id="right"></div>		
<div id="left"></div>	
</body>
</html>
注意：right要放在left的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素在先，
那么float的元素将被排斥到下一行。由于right是float的元素，而left是非float的元素，为避免right内容换行下移，需要把right放在left的前面。

方法二：左侧设置margin-right为右侧的宽度，右侧采用绝对定位，根据所需的right与浏览器窗口的顶端和右边的距离分别设置top和right。
<!doctype html>
<html>	
<head>		
<style type="text/css">		
body{			
margin:0;		
}		
#left{			
height:300px;			
margin-right:500px;			
background:#DDD;		
}		
#right{			
width:500px;			
height:300px;			
position:absolute;			
top:0;			
right:0;			
background:#AAA;		
}		
</style>	
</head>	
<body>		
<div id="left"></div>		
<div id="right"></div>	
</body>
</html>

此时left和right的位置前后无关紧要。

注意：由于body默认有margin，对绝对定位的right设置top:0和right:0会导致左右侧之间有缝隙且不等高，为此，可统一设置body的margin为0。

 

2、左右固定宽度，中间自适应<!doctype html>

<html>	
<head>		
<style type="text/css">		
#left{			
width:200px;			
height:300px;			
float:left;			
background:#AAA;		
}		
#middle{			
height:300px;			
margin-left:200px;			
margin-right:500px;			
background:#DDD;		
}		
#right{			
width:500px;			
height:300px;			
float:right;			
background:#AAA;		
}		
</style>	
</head>	
<body>		
<div id="left"></div>		
<div id="right"></div>		
<div id="middle"></div>	
</body>
</html>
注意：right要放在middle的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素
在先，那么float的元素将被排斥到下一行。由于right是float的元素，而middle是非float的元素，为避免right内容换行下移，需要把right放在middle的前面。

方法二：
<!doctype html>
<html>	
<head>		
<style type="text/css">		
body{			
margin:0;		
}		
#left{			
width:200px;			
height:300px;			
position:absolute;			
top:0;			
left:0;			
background:#AAA;		
}		
#middle{			
height:300px;			
margin-left:200px;			
margin-right:500px;			
background:#DDD;		
}		
#right{			
width:500px;			
height:300px;			
position:absolute;			
top:0;			
right:0;			
background:#AAA;		
}		
</style>	
</head>	
<body>		
<div id="left"></div>		
<div id="middle"></div>		
<div id="right"></div>	
</body>
</html>


此时left、middle和right的位置前后无关紧要。




注意：由于body默认有margin，对绝对定位的left设置top:0和left:0，right设置top:0和right:0会导致左右侧和中间之间有缝隙且不等高，为此，可统一设置body的margin为0。


 






		

		
posted @ 
2017-04-17 14:19 
摘星子 
阅读(218) 
评论(0) 
 
收藏 
举报