多列布局

作者: 老95 | 来源:发表于2017-06-03 21:59 被阅读0次

页面架构
CSS3开发常用核心技能
css常见布局（二）
多列布局
多列布局
多列布局
多列布局
多列布局
多列布局
CSS3多列布局

简介
CSS多列布局继承自块级布局模式，允许简单地定义多列文本。
当阅读文字的时候，从一行末尾移动到下一行开始处，容易弄错读到了哪一行。为了最优化使用大的显示屏幕，设计中应限制文字段落的宽度而并列排布，类似报纸。
兼容问题

image.png

由此，可以看出，除了UC浏览器之外，以上浏览器均支持。

使用

1、列数和宽度
column-count：设置列数，自动计算每列的宽度。
column-width：设置每列宽度，自动调整列数，如果宽度不足两列，则只显示一
列，宽度也将是失效。
columns：column-count和column-width的简写，优先保证宽度，在宽度优先达到
指定宽度时，设置列数。
eg. columns：5；
columns：20em；
columns：12 20em；
2、列间隙
column-gap：列之间的间隙建议值为1em。
eg. column-gap：2em; column-gap：20px;
3、优雅降级
多列属性会被不支持多列模型的浏览器忽略。
注意：
a、不是所有的浏览器都支持不带前缀的属性。-moz-、-webkit-
b、写的时候最好写三次：-moz-columns：5；-webkit-columns：5；columns：5；
4、列边框设置
column-rule-width：*px 或者 thin(最窄) 或者 medium(中等) 或者 thick(最厚)
column-rule-color：列边框的颜色
column-rule-style：和border-style的值一样。
column-rule：复合属性。eg. column-rule：2px solid cyan;
5、实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            
            #wrap{
                
                border: 1px solid red;
                padding-bottom: 20px;
                
                /*如果继续放大容器时，会保证列数不变，如果能保证最小列宽，给每一列增加宽度*/
                /*如果继续缩小容器时，在保证最小列宽的基础上，会拆列数，保证最小列宽*/

                column-count: 5;
                column-width: 16rem;
                column-rule: 2px solid;
                column-gap: 4rem;
            }
            h1{
                /*column-span：只有两个值，1或者all，默认情况下是1。*/
                column-span: all; /* 跨列*/
                border-bottom: 1px solid red;
            }
        </style>
    </head>
    <body>
        
        <div id="wrap">
            <h1>童话故事选——安徒生·郑渊洁</h1>
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
            天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了天亮了
        </div>
    </body>
</html>