三栏布局的几种解决方案

 

题目

解决方案有一下几种

1.flex布局

2.grid布局

3.absolute布局

4.float布局

5.table布局

1.flex布局解决方案

<section class="layout flex">
        <style>
            .layout.flex .left-main-right {
                display: flex;
                height: 300px;
            }

            .layout.flex .left-main-right .left,
            .layout.flex .left-main-right .right {
                flex: 300px 0 0;
                background-color: red;
            }

            .layout.flex .left-main-right .main {
                flex: 1;
                background-color: blueviolet;
            }
        </style>
        <article class="left-main-right">
            <div class="left"></div>
            <div class="main">flex布局解决方案</div>
            <div class="right"></div>
        </article>
    </section>

优点：快捷方便 并且兼容性好

如果不明白flex布局的可以参考阮一峰老师的博客

2.grid布局解决方案

<section class="layout grid">
        <style>
            .layout.grid .left-main-right {
                display: grid;
                grid-template-columns: 300px auto 300px;
            }

            .layout.grid .left-main-right div {
                height: 300px;
            }

            .layout.grid .left-main-right .left,
            .layout.grid .left-main-right .right {
                background-color: red;
            }

            .layout.grid .left-main-right .main {
                background-color: purple;
            }
        </style>
        <article class="left-main-right">
            <div class="left"></div>
            <div class="main">grid布局解决方案</div>
            <div class="right"></div>
        </article>
    </section>

不明白grid布局的同学可以参考阮一峰老师的博客

目前最强的布局方式

3.absolute布局解决方案

<section class="layout absolute">
        <style>
            .layout.absolute {
                height: 300px;
            }

            .layout.absolute .left-main-right div {
                position: absolute;
                height: 300px;
            }

            .layout.absolute .left {
                left: 0;
                width: 300px;
                background-color: red;

            }

            .layout.absolute .right {
                right: 0;
                width: 300px;
                background-color: red;
            }

            .layout.absolute .main {
                left: 300px;
                right: 300px;
                background-color: purple;
            }
        </style>
        <article class="left-main-right">
            <div class="left"></div>
            <div class="main">absolute布局解决方案</div>
            <div class="right"></div>
        </article>
    </section>

缺点：可使用性比较差 （用了absolute 子元素也要脱离文档流）

优点：快捷，兼容性好

4.float布局解决方案

<section class="layout float">
        <style>
            .layout.float {
                height: 300px;
                overflow: hidden;
            }

            .layout.float .left {
                float: left;
                width: 300px;
                height: 300px;
                background-color: aqua;
            }

            .layout.float .right {
                float: right;
                width: 300px;
                height: 300px;
                background-color: aqua;
            }

            .layout.float .main {
                background-color: rebeccapurple;
                height: 300px;
            }
        </style>
        <article class="left-right-main">
            <div class="left"></div>
            <div class="right"></div>
            <div class="main">浮动的解决方案</div>
        </article>
    </section>

缺点：要记得清除浮动

优点：兼容性好

5.table布局解决方案

<section class="layout table">
        <style>
            .layout.table .left-main-right {
                display: table;
                width: 100%;
                height: 300px;
            }
            .layout.table .left-main-right  div {
                display: table-cell;
            }
            .layout.table .left-main-right .left {
                background-color: blanchedalmond;
                width: 300px;
            }
            .layout.table .left-main-right .right {
                background-color: blanchedalmond;
                width: 300px;
            }
            .layout.table .left-main-right .main {
                background-color:blueviolet
            }
        </style>
        <article class="left-main-right">
            <div class="left"></div>
            <div class="main">table布局解决方案</div>
            <div class="right"></div>
        </article>
    </section>

缺点：

优点：比较方便，兼容性好

页面布局变通

三栏布局

左右宽度固定，中间自适应

上下高度固定，中间自适应

两栏布局

左宽度固定，右宽度自适应

右宽度固定，左宽度自适应

上高度固定，下高度自适应

下高度固定，上高度自适应

 

页面布局小结

1.语义化要掌握到位

2.页面布局理解深刻

3.CSS基础扎实

4.思维灵活并且上进

5.代码书写规范