css3中的多列布局，用于实现文字像报纸一样的布局

作用：专门用于实现类似于报纸类的布局
常用的属性如下：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局</title>
    <style>
        .outer{
            width: 1000px;
            margin: 0 auto;
            /* 直接指定列数 */
            column-count: 5;
            /* 指定每一列的宽度，会自动计算列数 */
            column-width: 220px;

            /* 复合属性，能同时指定列宽和列数 */
            columns: 3;

            /* 调整列间距 */
            column-gap: 20px;

            /* 调整边框复合属性 */
            column-rule: 2px dashed red;
        }
        h1{
            column-span: all;
            text-align: center;
            font-size: 50px;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="outer">
        <h1>多列布局</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae aspernatur officia esse quis accusantium dolores nesciunt voluptas architecto tempore quaerat. Numquam laborum modi dolorem, nam reiciendis iste temporibus omnis commodi ducimus explicabo sunt doloribus nemo nostrum dicta accusamus. Aliquam nihil error minima ab illo sequi, maiores laborum nemo, atque, enim magni labore dolores quod. Nam aperiam ipsa error illo est quod voluptas. Soluta quibusdam quia doloribus pariatur dicta eos est quas animi saepe veritatis nulla exercitationem eaque nemo, et velit ullam perferendis fugit minima error iusto esse ratione culpa minus! Numquam quae nisi ipsa quas hic quod cum sit placeat eveniet voluptates ratione saepe amet delectus molestiae ut laudantium quaerat in nemo mollitia quia veritatis velit, labore molestias. Cumque quas placeat libero. Quisquam sunt ullam temporibus ipsa dolores debitis. Nemo commodi unde error neque quis sed quibusdam ad libero ipsa, facere deleniti officia laboriosam hic laborum dicta fugiat, fugit placeat omnis quos esse nam facilis repellendus asperiores. Praesentium ipsam ipsa est reiciendis laudantium, tempore quos, laborum perferendis in culpa dignissimos, beatae dolore commodi. Dolor debitis ipsam suscipit eaque temporibus laborum exercitationem! Ipsum ex illum dolores consectetur reprehenderit placeat vel maxime, perferendis nisi consequatur! Animi deleniti quis quam ullam ipsam officiis praesentium dolore dicta iure, veritatis sapiente ut aspernatur, voluptates in, eius totam error id fuga suscipit a? Accusantium sint beatae nisi inventore debitis dolore similique dolor ipsam officiis iste magnam unde hic dolores voluptatum aperiam blanditiis consequuntur, quos, odit quia explicabo eveniet magni quae voluptatibus. Iste ab tenetur enim in. Molestias voluptate possimus placeat eaque totam odio praesentium beatae corporis sit officia? A rerum impedit sint provident repellat dolorem, pariatur qui mollitia enim corporis. Voluptatem reprehenderit repellendus quisquam, incidunt impedit inventore ipsam ratione, rem corrupti ea facilis maxime hic, similique dolores perspiciatis omnis quasi? Cum consequuntur error doloribus eos reprehenderit, veniam nulla temporibus quod quo perferendis explicabo debitis nostrum hic tempora nobis iure exercitationem harum sequi illum cupiditate fugiat voluptatibus voluptatum ad! Sunt eligendi, debitis quidem nemo minima voluptate officiis porro, doloremque quisquam neque animi voluptas laboriosam est distinctio quia natus qui earum molestias. Quibusdam illum quisquam assumenda excepturi mollitia sint aperiam unde laborum! Corrupti inventore excepturi minima vero suscipit non accusamus consequuntur optio doloribus omnis, recusandae veritatis molestias ullam distinctio, nihil porro, commodi quidem ut voluptates quod? Aut, a at harum libero atque quis tempora maiores architecto consequatur iusto porro voluptatum aspernatur illo. Vel aut pariatur natus, quod suscipit a velit fugiat provident cum magni voluptatem necessitatibus voluptate nobis, quas voluptates sunt praesentium. Delectus voluptatem ratione officiis corrupti? Nostrum expedita, animi nulla obcaecati voluptatum saepe dignissimos velit omnis eos voluptates tenetur doloremque quae enim ipsa illo delectus quis necessitatibus aspernatur dolores natus alias. Incidunt, voluptatibus numquam quam animi quos vel atque commodi ipsa repellendus. Quos non recusandae molestias quis sapiente. Libero sit illum facilis reprehenderit obcaecati magni iure tempora. Commodi voluptas repellendus dolorem sequi vel possimus tempora temporibus quisquam vero accusamus culpa, soluta quidem perferendis voluptate ea itaque nihil placeat. Harum nemo fuga molestias. Tempora dolore laudantium nihil! Eum.</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam temporibus minima quidem sunt quo impedit facilis similique odit voluptate quas tenetur, ea qui obcaecati, quaerat, libero quis vel quibusdam iste at aperiam! Fugit perferendis molestiae magni! Aliquam impedit unde officiis minus voluptates exercitationem, mollitia praesentium voluptatibus neque perferendis repellendus dignissimos illum aliquid facilis! Repellendus magni sunt porro dolore veritatis quod nihil deleniti ut eveniet labore aut possimus dicta laborum deserunt, nemo nam atque beatae adipisci aliquid tempora accusamus quia earum! Eligendi ipsa doloribus reprehenderit libero beatae totam consectetur! Quia, consequatur? Quod fugit ad aperiam possimus perspiciatis expedita iure quisquam sapiente atque quam cumque nulla ab, libero eos corporis dignissimos repudiandae, porro rerum consectetur? Placeat, repudiandae nisi ratione inventore asperiores sed beatae laboriosam fugit odit hic minima dolore, possimus nostrum illum voluptate nemo nam dicta obcaecati nesciunt, libero impedit similique labore? Rerum saepe ad perspiciatis necessitatibus id aperiam corrupti dolor eius. Corporis ea sequi modi itaque laborum dolor mollitia minus non sint atque enim dolore fuga aliquid, iste facilis inventore voluptatum quisquam iure? Tenetur facilis ipsam in placeat quos quod quasi ea adipisci beatae. Repudiandae voluptas est ducimus pariatur cupiditate quod, consequatur explicabo, soluta quasi assumenda nobis tempora maxime rem iure deserunt, debitis exercitationem doloremque voluptate! Adipisci autem est aut commodi facilis dolorem magnam nostrum. Distinctio mollitia, quod magnam tenetur saepe ipsam aperiam, accusamus, neque obcaecati corporis ipsum sequi eum. Iusto blanditiis in neque ad consequatur fugiat sequi facilis quisquam dignissimos earum labore voluptatem explicabo provident dolor molestiae, totam ratione quidem sed. Tempore ea, deleniti veniam, ut placeat aperiam delectus eligendi minus accusantium laborum similique eius nulla recusandae autem nesciunt voluptatum quia? Dolores similique tenetur impedit optio dignissimos alias, sit quasi veritatis, totam aperiam autem ratione quae vel. Facilis placeat cumque doloremque libero optio, culpa totam illo quas eos provident? Itaque labore nostrum recusandae ut totam quos officia ab! Nisi minus pariatur similique repellat iusto esse quae deserunt corrupti odit aperiam, optio magni aliquam magnam ex reprehenderit alias ipsam voluptatem. Ad doloribus commodi voluptas ex, tempora aspernatur reprehenderit quaerat molestiae deleniti minima laboriosam dolor sapiente, rem atque architecto quo, adipisci cupiditate! Molestias repellat nisi delectus iste consectetur dolorum laboriosam eligendi neque sed, eaque possimus eius asperiores odio similique minus est qui, recusandae cum iusto repudiandae nam quaerat totam quam excepturi! Pariatur nulla mollitia dolorem facere, necessitatibus sequi quod nihil! Aliquam rem sed dicta corporis ex facere quasi non ullam harum id.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo perferendis sint, aperiam aliquam tempora nobis aliquid veritatis, quam labore nihil quaerat! Odit deserunt perspiciatis, temporibus non soluta omnis nulla sequi voluptate, placeat recusandae natus velit assumenda at excepturi molestiae in. Atque, quaerat quis! Rem harum, explicabo quos illum ullam voluptate? Dignissimos vero, voluptatum quisquam reprehenderit, voluptates ipsam laboriosam vitae at pariatur impedit, modi exercitationem voluptatem deserunt nihil iure! At repudiandae quidem ullam accusamus! Unde, mollitia iste. Natus recusandae illo veniam nulla laboriosam aliquam, nam sunt dolore fugit eos repellat quidem odio neque rem blanditiis excepturi asperiores est officiis ratione temporibus repellendus vero? Deleniti explicabo porro at. Illum porro dicta, aliquam nam rerum, sed ipsa quae natus a odio vero perferendis cumque amet harum! Necessitatibus obcaecati voluptatem nostrum aliquid officiis dolores, neque architecto laudantium quis consequuntur nesciunt perspiciatis, placeat omnis est, perferendis magni unde. Dolores, eaque eos ex laborum quo provident reprehenderit dolore magni, velit reiciendis aut obcaecati natus debitis sunt. Similique ducimus reprehenderit in id quia velit inventore saepe ab! Asperiores, pariatur quod ipsam placeat veritatis laborum dolores laudantium perspiciatis impedit aspernatur suscipit accusantium odio porro beatae maxime! Eaque debitis ea rem, officiis asperiores non veritatis placeat cumque esse in error, cum iure laborum perferendis laboriosam vero reprehenderit fuga, sint temporibus ullam natus officia reiciendis. Possimus accusantium rem eos, fuga inventore vel perferendis eaque repudiandae! Recusandae itaque odit incidunt mollitia, similique sunt debitis placeat delectus omnis corporis dicta, aperiam vel obcaecati iste fuga exercitationem consequuntur deserunt nam a magni repellendus explicabo voluptatibus laudantium. Maiores quidem exercitationem optio impedit, recusandae temporibus rerum illo fugiat corrupti eaque dolorum blanditiis, perferendis dignissimos, atque nam. Distinctio incidunt molestias voluptatibus ipsum pariatur nihil similique debitis placeat perspiciatis, laudantium ducimus, repudiandae, facilis atque id! Sequi minus, repudiandae nam ducimus laboriosam explicabo reiciendis expedita provident. Accusamus, alias!</p>
        <img src="../事件/10.16作业/image/1.jpg" alt="">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum culpa necessitatibus distinctio ipsum repudiandae error, explicabo dolor fuga ex, eveniet enim vero consectetur dolorem tempora porro nulla praesentium quos nam magnam omnis maxime molestiae deleniti? Esse consequatur magni corporis soluta commodi laboriosam, eaque molestiae numquam harum nesciunt corrupti, libero nam saepe quam quis fugit error aliquam nostrum, possimus eveniet veritatis. Mollitia tempora, ducimus accusantium magnam itaque vero et nam possimus enim sapiente atque eum nulla provident asperiores minus tempore perspiciatis aperiam fugit neque obcaecati veritatis perferendis expedita? Ipsa perferendis deleniti eius officia magni vel veritatis, minus voluptatum consequuntur error consectetur perspiciatis ipsum id? Nobis et reprehenderit possimus repudiandae labore maxime beatae molestias, placeat ea, eaque illo, accusantium totam! Non iste, totam facilis, eveniet, quaerat repellat nihil perferendis omnis ullam expedita illo iure aspernatur suscipit! Doloribus, ducimus velit. A, quisquam reiciendis culpa, voluptatum laboriosam omnis harum odio quasi quod mollitia quibusdam, eligendi temporibus vitae consequatur quidem delectus ipsam incidunt aliquid deleniti iure quo dignissimos. Nostrum atque ipsam totam dolores? Consequatur necessitatibus numquam exercitationem beatae saepe ad non ipsam repellendus est quos? Ducimus at hic iusto? Ex non assumenda asperiores quibusdam tenetur ipsum voluptatum adipisci vel! Minus, dolores veniam! Possimus, aut veritatis!</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt in perspiciatis eos, doloremque accusantium quisquam laudantium id facere. Consequatur ea iusto officia omnis! Sequi facilis labore optio eum vitae ut ab, nobis, qui repudiandae facere blanditiis sapiente dignissimos exercitationem, nam esse nisi saepe aliquam obcaecati eveniet fuga aliquid officia incidunt minima fugit. Numquam nihil iste sequi recusandae blanditiis! Quos veniam, molestias delectus placeat quas aliquam dolor nobis necessitatibus inventore quaerat sit magnam accusantium. Rem tempore, reiciendis atque repudiandae rerum eos pariatur, ab earum, beatae dignissimos ipsa in cum deserunt odit velit laudantium quos nemo architecto recusandae unde quod ex similique! Commodi, rerum vel! Nostrum, rerum dolore perferendis repellat illum at sed perspiciatis odio a corrupti. Voluptas laboriosam sunt mollitia eaque reiciendis repellendus, modi ea corrupti harum assumenda ratione necessitatibus et magni architecto distinctio. Consectetur molestias nam, fugit porro et nemo animi saepe doloremque eligendi beatae accusamus quos numquam, voluptate iusto sequi. Tenetur vel, assumenda laboriosam quis esse mollitia fuga atque quos eum voluptas dolore, adipisci, ipsam odio quas? Explicabo, repudiandae? Commodi aspernatur, quam quod ea tenetur sequi veniam iusto hic aperiam! Debitis temporibus magni rerum esse, quia voluptates excepturi tempora adipisci, porro voluptatum veniam a suscipit. Ut, repudiandae impedit. Iure!</p>
    </div>
</body>
</html>
效果图：