CSS布局-三栏布局，左右宽度300px，中间自适应

tips：

css中“>”是:

　　css3特有的选择器，A>B 表示选择A元素的所有子B元素。

　　与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

 .a，.b｛逗号指相同的css样式｝；.a .b｛空格指后代元素｝；.a>.b｛大于号指子代元素｝；

 

一、浮动解决方案

代码：

	
	
	
	
	


	

		
		

		
右边
		

			
浮动解决方案
			
三栏布局，左右300px，中间自适应
		
 
	

 

 

 

二、绝对定位解决方案

代码：

	
	
	
	
	


	

		

		

			
绝对定位解决方案
			
三栏布局，左右300px，中间自适应
		
 
		

	

　

 

 

 

　　

三、flex解决方案

代码：

	
	
	
	
	


	

		

		

			
flex布局方案
			
三栏布局，左右300px，中间自适应
		
 
		

	

　

 

 

 

四、表格布局解决方案

代码：

	
	
	
	
	


	

		

		

			
表格布局解决方案
			
三栏布局，左右300px，中间自适应
		
 
		

	

　　

 

 

五、网格布局解决方案

代码：

	
	
	
	
	


	

		

		

			
网格布局解决方案
			
三栏布局，左右300px，中间自适应