css整理

66 阅读1分钟

三列布局: 方法一:

    .layout {
        margin-bottom: 100px;
        border: 1px solid blue;
    }
    .aside {
        float: left;
        width: 200px;
    }
    .main {
        padding: 0 200px;
        float: left;
        width: 100%;
        background-color: black;
    }
    .left {
        position: relative;
        margin-left: -100%;
        left: -400px;
        background-color: red;
    }
    .right {
        position: relative;
        left: -200px;
        margin-left: -200px;
        background-color: yellow;
    }
    <body>
        <div class="layout">
            <div class="main">1main mainmain mainmai nmainmainmain  main mainma inmainma inma inmain main main mai nmai nma inmain mainma inm ain</div>
            <div class="aside left">left</div>
            <div class="aside right">right</div>
        </div>
    </body>

方法二:flow + overflow(BFC) 方法三:flex 方法四:grid 参考文章:mp.weixin.qq.com/s/fV5friirT…