多行多栏布局

    

        


目录


Page Header
    
    
    

        
Here should be a picture, but I hadn't upload a picture for this place.
    
    

        

            

                
Column 1 of 3
                
Some text
            
        
        

            

                
Column 2 of 3
            
        
        

            

                
Column 3 of 3
            
        
        
    
    

        

            
Column 1 of 4
            
Some text
        
        
Column 2 of 4
        
Column 3 of 4
        
Column 4 of 4
    
    

有三列的那一行是通过浮动三个设定了宽度的块级元素和他们共同的父元素（作为容器）以实现的。三个块级元素的宽度（未设置border、padding和margin的情况下）之和等于父元素的宽度。这个方法的缺点是并非每一列的高度都能一致。

有四列的那一行是通过将四列对应的容器的display设置为table-cell实现的（不需要对他的祖先设定display: table-row或display: table），这样在实现多列布局的同时还能让每一列的高度相同。唯一的缺点是IE7及7以下不支持，所以可以说是多列布局的最优实践了。

这里需要强调一下，由于四列对应行上面的三列对应行是浮动着的，所以四列行别忘了开始的时候要用clear清浮动。