36.CSS3多列布局

                                                       第二十八章  CSS3多列布局

一、早期多列问题

         //五段内容，分为三列

<div>

<p>。。。</p>

<p>。。。</p>

<p>。。。</p>

<p>。。。</p>

<p>。。。</p>

</div>

 

          //带标题的五段内容，分为三列。

<div>

<h3>第一段内容</h3>

<p>。。。</p>

<h3>第二段内容</h3>

<p>。。。</p>

<h3>第三段内容</h3>

<p>。。。</p>

<h3>第四段内容</h3>

<p>。。。</p>

<h3>第五段内容</h3>

<p>。。。</p>

</div>

      所以CSS3提供了多列布局属性columns来实现这个动态变换功能

 

二、属性及版本

      CSS3提供了columns多列布局属性等7个属性集合，具体如下

           属性                      说明

        columns               集成columns-width和columns-count两个属性

        columns-width         定义每列宽度

        columns-count         定义分列宽度

        columns-gap           定义列间距

        columns-rule          定义列边框

        columns-span          定义多列布局中子元素跨列效果，Firefox不支持

        columns-fill          控制每列的列高效果，主流浏览器不支持

     由于column属性尚未纳入标准，大多数浏览器必须带上厂商前缀才能使用，好在主流浏览器大多能支持了，下面是主流浏览器支持情况和前缀情况

                             Opera       Firefox     Chrome    Safari     IE

         支持需带前缀       11.5～29      2～40      4～45     3.1～8     无

         支持不带前缀          无          无         无         无      10.0+

       //通过上面的表格，了解到想让最新的浏览器全部实现效果，都必须使用前缀

 

       //完整形式

            -webkit-columns：150px 4;

            -moz-columns：150px 4;

            columns：150px 4;

 

三、属性解释

        为了方便解释，就用Firefox浏览器测试，只用-moz-前缀展示

       1、columns   是一个复合属性，包含columns-width和columns-count这两种简写，意为同时设置为分列列数和分列宽度

            //分成四列，每列宽度自适应

            -moz-columns:auto 4；

 

       2、column-width   属性用于设置每列的宽度

            //设置列宽

                 div{

             -moz-columns:100px 3;    //当拉动浏览器边框缩小是，不足以支持3列，会自动变成2列，最后变成1列，1列最小宽度为100px。

                 }

 

            // -moz-columns-width:100px；  (如果没有设置列数，但设置了像素，系统会自动设置列数)

           属性值                  说明

       (1)  auto               默认值，自适应

       (2)  长度值             设置列宽

 

       3、column-count   用于设置多少列

            //设置列数

               -moz-columns-count: 4；

          (1)auto     默认值，表示就一列

          (2)数值     设置列数

 

       4、column-gap     用于设置列间距

               -moz-columns-gap:100px;

          (1)(2)同上

 

       5、column-rule   设置每列中间的分割线

               -moz-columns-rule:2px dashed gray;

          (1)columns-rule            <宽度><样式><颜色>的边框简写形式

          (2)columns-rule-width      单独设置边框宽度

          (3)columns-rule-style      单独设置边框的样式

          (4)columns-rule-color      单独设置边框的颜色

        判断线不会影响到布局，他会根据布局的缩放自我调节是否显示，如果我们把页面缩放到只能显示一列时，他自动消失。

 

       6、column-span  设置跨列大标题

               -webkit-column-span:all;   (由于火狐尚未支持，先用webkit)

          (1)none      默认值，表示不同跨列

          (2)all       表示跨列-