要求：自适应宽度，左右两栏固定宽度，中间栏优先加载；

 

 

1  2  3  4  5      6     62 63 64 65     
     
      66         
      
       Header
      
67         
      
       68             
       
        69                 
        
         70                     
         
main-wrap
71                     
         
main-wrap
72                 
        
73             
       
74             
       
        75                 
        
sub
76                 
        
sub
77                 
        
sub
78             
       
79             
       
        80                 
        
extra
81                 
        
margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;
82             
       
83         
      
84         
      
       Footer
      
85     
     
86 87 88 

 

三点需要理解的

一、margin-bottom: -9999px;padding-bottom: 9999px;

 

原理：

 

同列的div设置一个父级 overflow:hidden 超出部分隐藏

 

给同列的div设置css margin-bottom:-10000px; padding-bottom:10000px;

这样就可以实现三列等高！

 

二、

41             margin-left: -100%;

 

50             margin-left: -200px; 原理：中间列浮动并且宽度是100%，则后面的div的浮动就会被挤到下一行，当使用margin左负值，超过自身的宽度时，这个元素在第一行就有位置了。 而margin的负值达到-100%时，恰能达到窗口最左侧。 三、中间栏优先加载的意思 由于浏览器的显示方式是从上到下一行一行解析代码的，所以如果要让中间列优先加载就需要将中间列的内容写在三列当中的最前页。 就是先写中间列的div的意思。。。