css3——多列布局、瀑布流

多列布局

• colum-count：属性设置列的具体个数
• colum-width：属性控制列的宽度
• column-gap：两列之间的列间距
• column-rule：规定列之间的分割线的宽度、样式和颜色
• column-span：规定元素应横跨多少列（1：不跨列（默认）；all：跨所有列）

实例：

<style>
        div {
    
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            /*设置列数*/
            column-count: 3;
            /*添加列间隙样式，与 border 类似*/
            column-rule: 2px dotted #f98769;
            /*设置列间隙*/
            column-gap: 50px;
            /*设置列宽
            原则：取大优先
            1.如果人为设置宽度大，则取更大的值，但是会填充整个屏幕，意味最终的宽度可能大于设置的宽度
            2.如果人为设置的宽度更小，则使用默认计算的宽度*/
            column-width: 100px;
        }

        div > h3 {
    
            text-align: center;
            /*设置跨列显示*/
            column-span: all;
        }
</style>

<div>
    <h3>文章</h3>
    <p>
        地坛离我家很近。或者说我家离地坛很近。总之，只好认为这是缘分。地坛在我出生前四百多年就座落在那儿了，而自从我的祖母年轻时带着我父亲来到北京，就一直住在离它不远的地方——五十多年间搬过几次家，可搬来搬去总是在它周围，而且是越搬离它越近了。我常觉得这中间有着宿命的味道：仿佛这古园就是为了等我，而历尽沧桑在那儿等待了四百多年。</p>
    <p>
        它等待我出生，然后又等待我活到最狂妄的年龄上忽地残废了双腿。四