css实现多栏布局

最新推荐文章于 2025-12-10 20:36:34 发布

原创最新推荐文章于 2025-12-10 20:36:34 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

html代码

<body>
    <div class="container clearfix">
        <!-- 浮动元素写在常规流块盒前
            浮动盒子在包含块中排列时，会避开常规流盒子
            常规流盒子在包含块中排列时，会忽略浮动盒子
        -->
        <div class="aside"></div>
        <div class="main">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur corporis, blanditiis expedita est dignissimos fugit quod quas quisquam sapiente qui dolorem illo. Ducimus placeat et similique adipisci ea amet atque magni quis est totam. Tempore, obcaecati sunt? Quis quod quas atque asperiores, amet ab, distinctio animi praesentium laborum illum provident itaque odio id aliquam. Voluptas incidunt quae numquam voluptates alias. Hic ullam soluta dolorem quam ex quasi eum inventore cum dicta nihil. Nulla dolore repellendus quod, fuga atque ipsum eius illo, esse iusto nam sunt totam saepe molestias quisquam voluptate ex tenetur libero soluta officia ducimus eveniet. Neque, ipsa omnis. Iusto earum deserunt iure impedit delectus unde possimus reprehenderit dicta odit recusandae eveniet sapiente quasi in quidem ad facere maxime repellat, amet dolorum modi libero fugiat blanditiis molestias. Quas soluta fugit voluptas illo perspiciatis impedit neque. Quisquam tempora similique quos modi illum voluptatibus eaque reprehenderit ab qui itaque inventore doloremque ullam est cumque, perferendis iure amet provident! Aperiam nesciunt qui at neque saepe cupiditate rerum illum non illo excepturi harum, odio, labore aut quidem eum corporis quos eos amet eaque nemo, itaque nam? Aperiam excepturi delectus non voluptatum iste labore voluptas soluta, doloremque corporis ipsum blanditiis adipisci nihil cupiditate quo assumenda molestias officia repudiandae architecto neque qui vero incidunt ducimus? Nostrum ex consectetur blanditiis itaque ut pariatur reiciendis tempore? Placeat ex perferendis incidunt suscipit autem dolorum facere cum, quasi cupiditate et blanditiis modi atque pariatur, itaque quidem, ut explicabo debitis amet vel velit eligendi! Aliquam a minus ducimus, esse nulla voluptatem sunt quibusdam error laborum sed laboriosam asperiores cum facere est non! Assumenda perferendis tenetur obcaecati, dolor debitis aspernatur culpa illum at eaque voluptates. Rerum tempora soluta omnis! Eius sunt ut laudantium? Ullam, aperiam? Laboriosam deleniti voluptatibus veniam cupiditate voluptas totam ab neque ipsam labore soluta cumque rem dolor nobis corporis officiis iusto repudiandae alias optio nostrum porro, quae ipsa eligendi quibusdam? Quae quis repellat eligendi voluptatibus laborum provident et tempore, veniam temporibus, nam repellendus quo officiis voluptatum laboriosam laudantium molestiae! Quaerat a, et perferendis, maxime eos quasi harum numquam corrupti explicabo reprehenderit deserunt rem quibusdam repellendus itaque autem, nihil recusandae odio magnam eaque in dignissimos aspernatur laborum esse voluptas! Mollitia porro voluptate rerum beatae tempora obcaecati illum quibusdam. Eaque, deleniti porro quis debitis quidem aliquid veritatis at, in amet exercitationem ipsum facilis consequuntur laboriosam nihil consequatur, quas aliquam. Quod, minima maxime. Modi fugit culpa ipsam ab, suscipit officiis quas odit asperiores eos ducimus ipsum nihil natus soluta molestiae nulla quibusdam fugiat tempora velit blanditiis ut! Corrupti commodi iusto odio itaque doloremque. Esse ea, reiciendis consequatur, fuga rerum, repudiandae veritatis a adipisci earum omnis voluptate minus fugit? Et sunt nam, obcaecati animi possimus placeat deserunt deleniti adipisci eligendi ipsam autem? Reprehenderit modi facere quo recusandae, dolores quam fugiat, esse placeat tenetur sapiente aperiam! Nam debitis dolore cum enim ipsa? Quidem, corrupti rerum? Nemo aut voluptatibus animi, officiis facilis rerum adipisci eveniet doloribus nam numquam cumque doloremque quia omnis fugit necessitatibus. Non, expedita eligendi! Accusantium consectetur perferendis nihil, esse eum facere repellendus explicabo fugiat? Ipsa aspernatur aliquam voluptas, libero illo delectus consequuntur quod perferendis nostrum repudiandae quisquam atque veniam inventore vitae voluptatum consectetur, consequatur expedita possimus! Facere, laboriosam. Voluptates, nesciunt error explicabo possimus voluptatem libero id, quo reiciendis esse, nostrum saepe reprehenderit rem minus a. Cupiditate, nesciunt ut nostrum quis repellat impedit in hic consequatur ea omnis minima fuga architecto placeat ratione neque pariatur nisi culpa? Laudantium velit repellat odit quis. Dignissimos debitis distinctio expedita aperiam sed nostrum. Voluptatibus quia vero sapiente nobis sint optio aliquam libero, minima facilis et rem, cum ratione ea. Soluta deserunt odio mollitia nisi, cum error nesciunt labore laborum, est id provident, eos sunt quibusdam eum voluptas modi quaerat ducimus amet officia nobis in exercitationem ipsum accusamus esse? Neque ut ab quasi, rem, incidunt corporis autem nostrum quae quisquam porro aspernatur sapiente error deleniti sequi corrupti voluptatibus, similique ipsum pariatur cum iusto qui. Neque corporis nemo rerum quibusdam nesciunt quisquam omnis est aperiam nobis voluptate placeat nulla, sit esse? Minima modi enim iure, ipsam ea est fugit debitis, veniam autem corrupti iusto praesentium fugiat voluptas alias atque? Qui iste odit asperiores eveniet. Recusandae suscipit sint dolorum commodi similique ab aliquid qui facere veniam in sunt, vero iure illo numquam quia vitae rerum? Qui neque laboriosam culpa tempora provident, porro voluptatem velit nesciunt itaque at doloribus necessitatibus consectetur id cum officiis molestiae ab dicta aliquid quibusdam quam earum maxime quas asperiores quae! Eaque nisi impedit laborum numquam, nesciunt modi eum corrupti ipsa. Ex rerum, in odio, magnam itaque perspiciatis soluta sunt voluptatem perferendis mollitia dolorum explicabo beatae iusto aliquid dolorem aliquam minus a! Vel cumque ad perferendis distinctio unde? Quam accusantium laudantium deserunt ab! Nihil facere delectus dolore accusamus eum autem possimus cumque deleniti fugit laborum illo nam, velit cupiditate, quia iste quaerat error mollitia, reiciendis nemo unde ratione? Quos pariatur laborum vitae inventore impedit ad eum tenetur fuga. At, consequatur ab? Cumque hic, sequi unde, deserunt asperiores ipsam eos nemo odit pariatur, mollitia ullam reiciendis dolorem fuga possimus consectetur quas esse veritatis repudiandae illum exercitationem? Sequi, quo ipsam sed magni nisi itaque expedita eos aperiam blanditiis debitis laboriosam totam reiciendis architecto. Ab rerum magni et consectetur dignissimos exercitationem quos laboriosam perferendis nisi quisquam cupiditate architecto aliquid doloremque, quia veniam atque eveniet quas nihil aut velit laborum reprehenderit? Recusandae, dicta. Ipsam quae et alias eaque, tenetur laboriosam minus dolores nulla quaerat placeat quibusdam dolor, in molestias aperiam nostrum illo officia repellat cumque, vero vitae excepturi? Dolor repellat veniam magni ratione aspernatur labore illo, quia doloremque. Cumque dicta quos consequatur itaque! Nostrum dicta ut omnis possimus totam delectus similique, necessitatibus quia modi, sequi exercitationem ducimus facilis vel quis asperiores neque eligendi officiis dolore vitae! Dolore consequatur dignissimos quod eaque ut commodi et ratione officiis quisquam dolorem eum sapiente incidunt, excepturi reprehenderit voluptas ex ipsa. Doloribus, vero voluptatem! Doloribus eveniet explicabo, ab vel possimus ipsum voluptas qui reiciendis quaerat ratione, libero, corporis sapiente? Sit illum, esse quia iure ad eligendi quisquam! Eligendi velit maiores maxime, optio consequatur voluptas similique!</div>
    </div>
</body>

css代码

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        .container {
            width: 90%;    /*高度由子元素撑开*/
            margin: 0 auto;
            background-color: #ccc;
            border: 2px solid #000;
            overflow: hidden; /*实现侧边栏和内容等高：容器高度=内容高度，侧边栏高度=容器高度*/
        }
        .aside {
            width: 300px;  /*侧边栏定宽*/
            height: 9999px;
            margin-bottom: -9990px; /*负边距制造高度,让容器高度由内容撑开*/
            margin-right: 10px;
            background-color: green;
            float: left;
        }
        .main {
            /* 宽度充满包含块剩余空间，实现内容区域宽度自适用视口大小 */
            overflow: hidden;  /*开启BFC让浮动兄弟不覆盖常规流块盒*/
            background-color: yellow;
            /* margin-left: 10px; 应给浮动元素设置右外边距 */
        }
    </style>

运行截图