CSS浮动依次贴边案例 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .outer{
                width: 940px;
                height: 440px;
                padding: 10px;
                border: 2px solid #000;
                margin: 10px auto;
            }
            .outer div{
                float: left;
            }
            .outer .box1{
                width: 300px;
                height: 260px;
                background: pink;
            }
            .outer .box2{
                width: 240px;
                height: 260px;
                background: cyan;
            }
            .outer .s_box{
                width: 200px;
                height: 130px;
            }
            .outer .box3{
                background: yellowgreen;
            }
            .outer .box4{
                background: greenyellow;
            }
            .outer .box7{
                width: 300px;
                height: 180px;
                background: blueviolet;
            }
            .outer .s_box2{
                width: 160px;
                height: 180px;
            }
            .outer .box5{
                background: purple;
            }
            .outer .box6{
                background: palegreen;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="s_box box3"></div>
            <div class="s_box box4"></div>
            <div class="s_box box4"></div>
            <div class="s_box box3"></div>
            <div class="box7"></div>
            <div class="s_box2 box5"></div>
            <div class="s_box2 box6"></div>
            <div class="s_box2 box5"></div>
            <div class="s_box2 box6"></div>
        </div>
    </body>
</html>

 

posted @ 2021-04-07 17:21  hapuluosi  阅读(161)  评论(0)    收藏  举报