float实现12栅格系统

最新推荐文章于 2023-10-13 16:59:20 发布

barbed

最新推荐文章于 2023-10-13 16:59:20 发布

阅读量306

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/barbed/article/details/108550955

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

12栅格系统布局，需要几份就占份，比如4–8分；2–10分
下面的结果图是每个都只占一份

<style>
        /* 占一行中的一列 */
        .col-1 {
            width: calc(100%/12);
            /* width: 8.33333%; */
        }

        /* 占一行中的两列 */
        .col-2 {
            /* width: 16.66666%;
             */
            width: calc(100%/12*2)
        }

        /* 占一行中的三列 */
        .col-3 {
            width: calc(100%/12*3);
        }

        /* 占一行中的四列 */
        .col-4 {
            width: calc(100%/12*4);
        }

        /* 占一行中的五列 */
        .col-5 {
            width: calc(100%/12*5);
        }

        /* 占一行中的六列 */
        .col-6 {
            width: calc(100%/12*6);
        }

        /* 占一行中的七列 */
        .col-7 {
            width: calc(100%/12*7);
        }

        /* 占一行中的八列 */
        .col-8 {
            width: calc(100%/12*8);
        }

        /* 占一行中的九列 */
        .col-9 {
            width: calc(100%/12*9);
        }

        /* 占一行中的十列 */
        .col-10 {
            width: calc(100%/12*10);
        }

        /* 占一行中的十一列 */
        .col-11 {
            width: calc(100%/12*11);
        }

        /* 占一行中的十二列 */
        .col-12 {
            width: calc(100%/12*12);
        }

        .bg-success {
            background-color: greenyellow;
        }

        .bg-error {
            background-color: red;
        }

        .size {
            height: 500px;
        }

        .row {
            border: 1px solid blue;
            overflow: hidden;
        }

        /* 设置浮动 */
        [class*=col-] {
            float: left;
            padding-right: 10px;
            box-sizing: border-box;
            background-clip: content-box;
        }

        .row>*:last-child {
            padding-right: 0;
        }

<body>
    <div class="row">
        <div class="size col-1 bg-success"></div>
        <div class="size col-1 bg-error"></div>
        <div class="size col-1 bg-success"></div>
        <div class="size col-1 bg-error"></div>
        <div class="size col-1 bg-success"></div>
        <div class="size col-1 bg-error"></div>
        <div class="size col-1 bg-success"></div>
        <div class="size col-1 bg-error"></div>
        <div class="size col-1 bg-success"></div>
        <div class="size col-1 bg-error"></div>
        <div class="size col-1 bg-success"></div>
        <div class="size col-1 bg-error"></div>
    </div>
</body>