文本多栏布局

文本多栏布局：column

column-width：每一栏的宽度

默认随总数大小改变

column-count：设置的总栏数

默认随宽度变化而变化

column-gap : 栏与栏之间的宽度

影响每栏的宽度

column-rule : 分隔线

column-rule-color : 分隔线的颜色
column-rule-width : 分隔线的宽度
column-rule-style : 分隔线的样式
column-rule : color width style
分隔线不占位， 不会对周边有影响

column-span: 栏的合并

1 ： 占一栏
all ： 占所有栏 合并栏
示例：

<div class="box">
        <p>
                我今天很荣幸能和你们一起参加毕业典礼，斯坦福大学是世界上最好的大学之一。我从来没有从大学中毕业。说实话,今天也许是在我的生命中离大学毕业最近的一天了。今天我想向你们讲述我生活中的三个故事。不是什么大不了的事情,只是三个故事而已。
                第一个故事是关于如何把生命中的点点滴滴串连起来。
                我在Reed大学读了六个月之后就退学了,但是在十八个月以后——我真正的作出退学决定之前,我还经常去学校。我为什么要退学呢？
                故事从我出生的时候讲起。我的亲生母亲是一个年轻的,没有结婚的大学毕业生。她决定让别人收养我, 她十分想让我被大学毕业生收养。所以在我出生的时候，她已经做好了一切的准备工作，能使得我被一个律师和他的妻子所收养。但是她没有料到,当我出生之后,律师夫妇突然决定他们想要一个女孩。 所以我的生养父母（他们还在我亲生父母的观察名单上）突然在半夜接到了一个电话:“我们现在这儿有一个不小心生出来的男婴,你们想要他吗？”他们回答道:“当然！”但是我亲生母亲随后发现，我的养母从来没有上过大学,我的父亲甚至从没有读过高中。她拒绝签这个收养合同。只是在几个月以后,我的父母答应她一定要让我上大学,那个时候她才同意。
                在十七岁那年,我真的上了大学。但是我很愚蠢的选择了一个几乎和你们斯坦福大学一样贵的学校, 我父母还处于蓝领阶层，他们几乎把所有积蓄都花在了我的学费上面。在六个月后, 我已经看不到其中的价值所在。我不知道我想要在生命中做什么,我也不知道大学能帮助我找到怎样的答案。 但是在这里，我几乎花光了我父母这一辈子的所有积蓄。所以我决定要退学,我觉得这是个正确的决定。不能否认,我当时确实非常的害怕, 但是现在回头看看,那的确是我这一生中最棒的一个决定。在我做出退学决定的那一刻, 我终于可以不必去读那些令我提不起丝毫兴趣的课程了。然后我还可以去修那些看起来有点意思的课程。
                
        </p>
    </div>

style:

<style>
        .box{
            width: 1000px;
            height: 600px;
            /* 设置分三栏 */
            column-count: 3;
            /* 栏与栏之间的宽度 */
            column-gap:20px;
            /* 分隔线的颜色 */
            column-rule-color:red;
            /* 分隔线的宽度 */
            column-rule-width:10px;
            /* 分隔线的样式 */
            column-rule-style:dashed;
            border: 1px solid black;
        }
    </style>

image.png