实现三栏布局的几种方法

实现布局之前首先应该明白三栏布局到底是什么。

所谓三栏布局就是：左右两侧的宽度固定，中间部分的宽度随窗口的宽度变化而自适应。

嗯，知道三栏布局的概念之后，我们现在要做的就是如何实现这个布局。

方法一：我们可以使用flex弹性盒模型。左右两侧设置固定的宽度，中间部分宽度设置为100%，这样当窗口大小改变时中间部分就会随之变换。具体代码实现如下：

css样式部分：
       .parent{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 300px;
        }
        .parent div{
            height: 300px;
        }
        .middle{
            width: 100%;
            background-color: #489ddf;
        }
        .left,.right{
            width: 200px;
            background-color: yellow;
        }

css布局部分：
<div class="parent">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

方法二：使用BFC实现布局。同样的左右两侧宽度固定，但是给中间部分设置overflow：hidden使它触发BFC。

css样式部分：
     .parent{
            min-width: 400px; //设置最小宽度的目的是防止当窗口缩小到一定大小时出现换行。
        }
        .parent div{
            height: 300px;
        }
        .left,.right{
            width: 200px;
            background-color: #489ddf;
            float: left;
        }
        .right{
            float: right;
        }
        .middle{
            overflow: hidden;
            background-color: yellow;
        }
css布局部分：
 <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>//把middle放到最后，不然会出现right部分换行的情况。
</div>

嗯，那么肯定会有小伙伴提问，如果不把middle部分最后渲染怎么解决换行的问题。我现在能想到就只有使用position来对rigth部分进行定位。具体代码实现如下：

css样式部分：
        .parent{
            min-width: 400px; //设置最小宽度的目的是防止当窗口缩小到一定大小时出现换行。
        }
        .parent div{
            height: 300px;
        }
        .left,.right{
            width: 200px;
            background-color: #489ddf;
            float: left;
        }
        .right{
            float: right;
            position: reletive;
            top: -300px;
        }
        .middle{
            overflow: hidden;
            background-color: yellow;
        }
css布局部分：
 <div class="parent">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

方法三：使用双飞翼布局实现。首先应该明白双飞翼布局的基本思想，该布局就是给三部分都设置浮动，中间部分设置padding值，左右部分设置负的margin值来改变它们的位置。

css样式部分：
 .parent{
            min-width: 400px;
            overflow: hidden;
        }
        .parent div{
            height: 300px;
            float: left;
        }
        .middle{
            width: 100%;
            background-color: yellow;
        }
        .main{
            float: none;
            padding: 0 200px;
        }
        .left,.right{
            width: 200px;
            background-color: #489ddf;
        }
        .right{
            margin-left: -200px;
        }
        .left{
            margin-left: -100%;
        }
css布局部分： 
<div class="parent">
    <div class="middle"><div class="main"></div></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

方法四：使用圣杯布局实现。

css样式部分：
         .parent{
            min-width: 400px;
            padding: 0 200px;
            overflow: hidden;
        }
        .parent div{
            float: left;
            height: 300px;
        }
        .middle{
            width: 100%;
            background-color: yellow;
        }
        .left,.right{
            width: 200px;
            background-color: #489ddf;
            position: relative;
            margin-left: -100%;
            left: -200px;
        }
        .right{
            margin-left: -200px;
            left: 200px;
        }
css布局部分： 
<div class="parent">
    <div class="middle"><div class="main"></div></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

方法五：使用position实现布局。给左右两侧设置position属性改变它们的位置。

css样式部分：
        .parent{
            padding: 0;
            min-width: 400px;
            position: relative;
        }
        .parent div{
            height: 300px;
        }
        .middle{
            width: 100%;
            background-color: yellow;
        }
        .left,.right{
            width: 200px;
            position: absolute;
            top: 0;
            background-color: #489ddf;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
 css布局部分： 
<div class="parent">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

以上就是我知道的实现的三栏布局的几种方法，希望能够帮到大家！