css常用布局-多列布局(瀑布流)详解及案例

在浏览器中所展示的宽度差不多,高度参差不齐,整体又很美观,呈现出瀑布流,这样的布局都属于多列布局。

css3-多列

多列布局类似报纸或杂志中的排版方式,主要用以控制大篇幅文本。

多列属性

  1、column-count

   属性规定元素应该被分隔的列数

  2、column-gap

   属性规定列之间的间隔大小

  3、column-rule   

  设置或检索对象的列与列之间的边框。复合属性。
  column-rule-color规定列之间规则的颜色。
  column-rule-style规定列之间规则的样式。
  column-rule-width规定列之间规则的宽度。

  4、column-fill

  设置或检索对象所有列的高度是否统一
  auto:列高度自适应内容
  balance:所有列的高度以其中最高的一列统一

  5、column-span  

  设置或检索对象元素是否横跨所有列。
  none:不跨列
  all:横跨所有列

  6、column-width

  设置或检索对象每列的宽度

  效果图如下所示:

 

 

具体实现代码如下:

    
    
    Document
    
    
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
        
            
            

今后余生,风雪是你

        
    
 
如果感觉对自己有帮助,麻烦点一下关注,会一直盒大家分享知识的,谢谢!!!

你可能感兴趣的:(css常用布局-多列布局(瀑布流)详解及案例)