CSS-多列布局1-概述

1、多列布局概述

通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！

2、常用属性

属性	版本	描述
columns	CSS3	设置或检索对象的列数和每列的宽度。复合属性
column-width	CSS3	设置或检索对象每列的宽度
column-count	CSS3	设置或检索对象的列数
column-gap	CSS3	设置或检索对象的列与列之间的间隙
column-rule	CSS3	设置或检索对象的列与列之间的边框。复合属性
column-rule-width	CSS3	设置或检索对象的列与列之间的边框厚度。
column-rule-style	CSS3	设置或检索对象的列与列之间的边框样式。
column-rule-color	CSS3	设置或检索对象的列与列之间的边框颜色。
column-span	CSS3	设置或检索对象元素是否横跨所有列。
column-fill	CSS3	设置或检索对象所有列的高度是否统一。
column-break-before	CSS3	设置或检索对象之前是否断行。
column-break-after	CSS3	设置或检索对象之前是否断行。
column-break-inside	CSS3	设置或检索对象内部是否断行。

3、常用属性说明

3.1 显示多少列.

（1）如果不设置 column-count 时

显示列数 = （总宽度+列间距）/ (列宽度+列间距)

（2）如果不设置 column-count 时

条件	显示列数
(列宽度+列间距)*列数 -列间距 <= 盒子宽度	显示列数量
(列宽度+列间距)*列数 -列间距 <= 盒子宽度	(总宽度+列间距）/ (列宽度+列间距)

3.2 实例效果

源代码：

    
    
    


    

    column-width:200px;
column-gap: 100px;
column-count: 3;
width: 800px;
  column-rule: 150px solid red;

    
    

      (column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
      <=800px

      因此显示列数 = 设置列数;
      

      column-rule-width的值，不影响列数显示。
    
    
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。
    
     

    column-width:200px;
column-gap: 100px;
column-count: 3;
width: 799px;
  column-rule: 150px solid red;

    
    

      (column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
      >799px

      因此显示列数 = (799+100)/(200+100)=2;
       

      column-rule-width的值，不影响列数显示。
    
    
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，

运行效果：

image.png