网页三栏布局五种实现方式（左中右）

深碍√TFBOYSˉ_ 2021-08-28 20:05 623阅读 0赞

适用：高度固定 左右宽度固定 中间自适应

<html>
    
    <head>
        <title>三栏布局</title>
        <meta charset="utf-8">
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .layout article div {
                min-height: 100px;
            }
        </style>
    </head>
    
    <body>
        <section class="layout float">
            <style>
                .layout.float .left-right-center .left {
                    float: left;
                    width: 300px;
                    background-color: blue
                }
    
                .layout.float .left-right-center .right {
                    float: right;
                    width: 300px;
                    background-color: red;
                }
    
                .layout.float .left-right-center .center {
                    overflow: auto;
                }
                .layout.float .left-right-center::after{
                    content: '';
                    display: block;
                    clear: both;
                }
            </style>
            <article class="left-right-center">
                <div class="left"></div>
                <div class="right"></div>
    
                <div class="center">
                    <h1>浮动解决方案：</h1>
                    <p>中间宽度小会跑到下边去 用bfc</p>
                </div>
            </article>
        </section>
        <section class="layout position">
            <style>
                .layout.position {
                    margin-top: 20px;
                    position: relative;
                }
    
                .layout.position .left-right-center .left {
                    top: 0;
                    left: 0;
                    width: 300px;
                    background-color: blue;
    
                    position: absolute;
                }
    
                .layout.position .left-right-center .right {
                    top: 0;
                    right: 0;
                    width: 300px;
                    background-color: red;
    
                    position: absolute;
                }
    
                .layout.position .left-right-center .center {
                    margin-left: 300px;
                    margin-right: 300px;
    
    
                }
            </style>
            <article class="left-right-center">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center">
                    <h1>决对定位解决方案：</h1>
                    <p>绝对定位1.左中右都是绝对定位 中间用 left right 1.左右用决对定位 中间用margin-left margin-right</p>
                </div>
            </article>
        </section>
    
        <section class="layout flex">
            <style>
                .layout.flex {
                    margin-top: 20px;
                }
    
                .layout.flex .left-right-center {
                    display: flex;
                }
    
                .layout.flex .left-right-center .left {
                    flex: 0 0 300px;
                    width: 300px;
                    background-color: blue;
                }
    
                .layout.flex .left-right-center .right {
                    flex: 0 0 300px;
                    width: 300px;
                    background-color: red;
                }
    
                .layout.flex .left-right-center .center {
                    flex: 1;
                }
            </style>
            <article class="left-right-center">
                <div class="left"></div>
    
                <div class="center">
                    <h1>flex解决方案</h1>
                    <p></p>
                </div>
                <div class="right"></div>
            </article>
        </section>
        <section class="layout table">
            <style>
                .layout.table {
                    margin-top: 20px;
    
                }
    
                .layout.table .left-right-center {
                    display: table;
                    width: 100%;
                }
    
                .layout.table .left-right-center>div {
                    display: table-cell;
                    height: 100px;
                }
    
                .layout.table .left-right-center .left {
                    width: 300px;
                    background-color: blue;
                }
    
                .layout.table .left-right-center .right {
                    width: 300px;
                    background-color: red;
                }
            </style>
            <article class="left-right-center">
                <div class="left"></div>
                <div class="center">
                    <h1>table解决方法</h1>
                </div>
                <div class="right"></div>
            </article>
        </section>
        <section class="layout grid">
            <style>
                .layout.grid {
                    margin-top: 20px;
                }
    
                .layout.grid .left-right-center {
                    width: 100%;
                    display: grid;
                    grid-template-rows: 100px;
                    grid-template-columns: 300px auto 300px;
                }
    
                .layout.grid .left-right-center .left {
                    background-color: blue;
                }
    
                .layout.grid .left-right-center .right {
                    background-color: red;
                }
            </style>
            <article class="left-right-center">
                <div class="left"></div>
                <div class="center">
                    <h1>网格布局解决方法</h1>
                </div>
                <div class="right"></div>
            </article>
        </section>
    
    
        <div>
            总结:
            以上提供了5种实现三栏布局的方式那么他们的优缺点呢？
    
            <p> 1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。</p>
    
            <p> 2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局</p>
    
            <p> 3、table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息</p>
    
            <p> 4、flex布局比较强大,但是还是存在IE上兼容性问题，只能支持到IE9以上</p>
    
            <p> 5、grid布局很强大，但是兼容性很差。ie不支持</p>
        </div>
    </body>
    
    </html>
    
    <script>
    
    
    
    </script>