三栏布局的几种方法

Posted 2020-10-25 完毕先生

三栏布局是一个比较常见的布局，在高度固定的情况下，左右各留出300px，中间自适应，可以有以下的几种写法。

比较常见的有浮动布局和绝对定位布局，但是flex布局现在也非常普遍了，Grid布局可能兼容性不太好，但也不失为一种方法。

因为下面的css代码中有许多的相同的地方，我们先我们先设置一些基本的css代码，用作左中右的颜色识别和高度的设置：

基本的css代码：

            *{margin: 0; padding: 0;}

            .layout {
                margin-top: 20px;
            }
            .layout article div {
                min-height: 100px;
            }
            .left {
                background: red;
            }
            .right {
                background: green;
            }
            .center {
                background: #ddd;
            }

 

浮动布局（主要利用的就是浮动脱离文档流的特点）：

　　html代码：

　　　　<section class="layout float">
            <article class="left-center-right">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center">
                    <h2>浮动解决方案</h2>
                    <p>这是三栏布局的中间部分这是三栏布局的中间部分</p>
                </div>
            </article>
　　　　</section>

　　css代码:

　　　　     .layout.float .left {
                float: left;
                width: 300px;
            }
            .layout.float .right {
                float: right;
                width: 300px;
            }
            .layout.float .center {
                margin: 0 300px 0 300px;
            }

绝对定位布局（与浮动定位布局的原理基本相同）：

html代码：

  　　　　　　<article class="left-center-right">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center">
                    <h2>绝对定位解决方案</h2>
                    <p>这是三栏布局的中间部分这是三栏布局的中间部分</p>
                </div>
            </article>

 

css代码:

  　　　　　　.layout.absolute .left {
                position: absolute;
                left: 0;
                width: 300px;
            }
            .layout.absolute .center {
                margin: 0 300px 0 300px;
            }
            .layout.absolute .right {
                position: absolute;
                right: 0;
                width: 300px;
            }          

 

弹性盒子布局：

这里用到了flex的一个简写方式。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。  --阮一峰《Flex布局教程》

flex-grow定义项目的放大比例。

如果flex-grow为1，那么它将占据项目的剩余空间，如果有许多个子项目，则他们将等分剩余项目空间。如果不清楚的，建议去看阮一峰老师的Flex布局教程，里面讲的很清晰。

 

html代码：

　　　　　<section class="layout flex">
            <article class="left-center-right">
                <div class="left"></div>
                <div class="center">
                    <h2>flex解决方案</h2>
                    <p>这是三栏布局的中间部分这是三栏布局的中间部分</p>
                </div>
                <div class="right"></div>
            </article>
        </section>

 

css代码：

　　　　　　  .layout.flex .left-center-right{
                display: flex;
            }
            .layout.flex .left {
                width: 300px;
            }
            .layout.flex .center {
                flex: 1;
            }
            .layout.flex .right {
                width: 300px;
            }

 

Grid布局（兼容性较差）

grid布局则可以直接控制二维布局，直接设定横向和纵向的布局方式。

html代码：

　　　　　<section class="layout grid">
            <article class="left-center-right">
                <div class="left"></div>
                <div class="center">
                    <h2>Grid布局解决方案</h2>
                    <p>这是三栏布局的中间部分这是三栏布局的中间部分</p>
                </div>
                <div class="right"></div>
            </article>
        </section>

 

css代码：

　　　　　　  .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }