栅格化布局的简单示例

最新推荐文章于 2025-06-14 19:41:31 发布

原创最新推荐文章于 2025-06-14 19:41:31 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

前端基础专栏收录该内容

27 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>栅格布局</title>
    <meta charset="utf-8">
    <style>
    .container {
        padding: 10px;
    }

    .row {
        margin-bottom: 20px; 
    }

    .row > div {
        border: solid 1px #999;
        background: #eee;
        height: 50px;
        margin: 10px;
        box-sizing: border-box;
    }

    .row:before, 
    .row:after {
        content:"";
        display:table;
        clear:both;
    }

    @media (min-width: 768px) {

        .col-md-1 {
            width: calc(8.333333% - 20px);
        }
        .col-md-2 {
            width: calc(16.6666667% - 20px);
        }
        .col-md-3 {
            width: calc(25% - 20px);
        }
        .col-md-4 {
            width: calc(33.3333333% - 20px);
        }
        .col-md-6 {
            width: calc(50% - 20px);
        }

        .col-md-1,
        .col-md-2,
        .col-md-3,
        .col-md-4,
        .col-md-6 {
            float: left;
        }

    }

   </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-3">col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-6">col-md-6</div>
        </div>
    </div>
</body>
</html>