六种三栏式布局

来源：互联网发布：淘宝助理连打只能2单编辑：程序博客网时间：2024/06/08 02:44
<!DOCTYPE html><html><head>    <title>layout</title>    <style type="text/css">        html,body{            margin: 0;            padding: 0;            height: 100%;        }        /*圣杯布局*/        .main{            height: 300px;            padding: 0 300px 0 300px;        }        .main .box{            float: left;        }        .main .mid{            width: 100%;            height: 100%;            background-color: black;        }        .main .left{            position: relative;            width: 300px;            height: 100%;            margin-left: -100%;            left: -300px;            background-color: yellow;        }        .main .right{            position: relative;            width: 300px;            height: 100%;            margin-left: -300px;            right: -300px;            background-color: yellow;        }        .sfy{            width: 100%;            height: 300px;        }        /*双飞翼布局*/        .box{            float: left;        }        .mid-box{            width: 100%;            height: 100%;        }        .mid-box .mid{            margin: 0 300px 0 300px;            height: 100%;            background-color: black;        }        .sfy .left{            width: 300px;            height: 100%;            margin-left: -100%;            background-color: yellow;        }        .sfy .right{            width: 300px;            height: 100%;            margin-left: -300px;            background-color: yellow;        }        /*flexbox布局*/        .flex{            display: flex;            height: 300px;        }        .flex .mid{            order: 1;            height: 300px;            flex: 1 1 auto;            background-color: black;        }        .flex .left{            order: 0;            height: 300px;            flex: 0 1 300px;            background-color: yellow;        }        .flex .right{            order: 2;            height: 300px;            flex: 0 1 300px;            background-color: yellow;        }        /* 绝对定位加margin */        .abso{            width: 100%;            height: 300px;            position: relative;        }        .abso .mid{            margin: 0 300px 0 300px;            background-color: black;            height: 300px;        }        .abso .left{            position: absolute;            left: 0;            top: 0;            width: 300px;            height: 300px;            background-color: yellow;        }        .abso .right{            position: absolute;            right: 0;            top: 0;            width: 300px;            height: 300px;            background-color: yellow;        }        /*浮动加margin，mid项要放在左右的后面*/        .float{            width: 100%;            height: 300px;        }        .float .mid{            margin: 0 300px 0 300px;            background-color: black;            height: 300px;        }        .float .left{            float: left;            width: 300px;            height: 300px;            background-color: yellow;        }        .float .right{            float: right;            width: 300px;            height: 300px;            background-color: yellow;        }        /*使用inline-block布局*/        .ib{            width: 100%;            height: 300px;            font-size: 0;        }        .ib .left{            display: inline-block;            width: 300px;            height: 300px;            background-color: yellow;        }        .ib .mid{            display: inline-block;            width: calc(100% - 600px);            height: 300px;            background-color: black;        }        .ib .right{            display: inline-block;            width: 300px;            height: 300px;            background-color: yellow;        }    </style></head><body>    <div class="main">        <div class="box mid"></div>        <div class="box left">left</div>        <div class="box right">right</div>    </div>    <hr><hr>    <div class="sfy">        <div class="box mid-box">            <div class="mid">mid</div>        </div>        <div class="box left">left</div>        <div class="box right">right</div>    </div>    <hr><hr>    <div class="flex">        <div class="mid"></div>        <div class="left"></div>        <div class="right"></div>    </div>    <hr><hr>    <div class="abso">        <div class="mid"></div>        <div class="left"></div>        <div class="right"></div>    </div>    <hr><hr>    <div class="float">        <div class="left"></div>        <div class="right"></div>        <div class="mid"></div>    </div>    <hr><hr>    <div class="ib">        <div class="left"></div>        <div class="mid"></div>        <div class="right"></div>    </div></body></html>
阅读全文
0 0