三栏布局实现的7种方法

三栏布局

三栏布局：左右两栏宽度固定，中间一栏宽度随浏览器自适应，布局方式有一下几种：
（为了便于截图，例子设置了一个固定宽度500px的div）

1、流体布局

左右两栏浮动布局，中间一栏使用margin-left和margin-right撑开，且设置宽度自适应

<div class="container">
    <div class="left">左侧内容</div>
    <div class="right">右侧侧内容</div>
    <div class="main">中间内容</div>
</div>

<style>
    .container {
        width: 500px;
    }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        background-color: pink;
    }
    .main {
        height: 200px;
        margin-left: 110px;
        margin-right: 110px;
        background-color: gray;
    }
    .right {
        float: right;
        height: 200px;
        width: 100px;
        background-color: yellow;
    }
</style>

结果：

注意：中间一栏mian必须写在第二栏right后面，否则right栏会被浮动显示在下面一行的右边
缺点：主要内容无法最先加载，内容较多时会影响体验

2、BFC三栏布局

BFC三栏布局与流体布局差不多，只是将mian的margin改成over-flow:hidden;来开启BFC

<div class="container">
    <div class="left">左侧内容</div>
    <div class="right">右侧侧内容</div>
    <div class="main">中间内容</div>
</div>

<style>
	.left {
	    float: left;
	    height: 200px;
	    width: 100px;
	    margin-right: 10px;
	    background-color: pink;
	}
	.main {
	   height: 200px;
	    overflow: hidden;
	    background-color: gray;
	}
	.right {
	    float: right;
	    height: 200px;
	    width: 100px;
	    margin-left: 10px;
	    background-color: yellow;
	}
</style>

结果：

缺点：中间栏目无法最先加载，影响用户体验

3、双飞翼布局

利用浮动元素的margin负值实现

<div class="container">
    <div class="content">
        <div class="main">中间内容</div>
    </div>
    <div class="left">左侧内容</div>
    <div class="right">右侧侧内容</div>
</div>

<style>
    .container {
        width: 500px;
    }
    .content {
        float: left;
        width: 100%;
    }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        background-color: pink;
    }
    .main {
        height: 200px;
        margin-left: 110px;
        margin-right: 110px;
        background-color: gray;
    }
    .right {
        float: right;
        height: 200px;
        width: 100px;
        margin-left: -100px;
        background-color: yellow;  
    }
</style>

结果：

主体内容代码可以优先加载，但代码结构略复杂

4、圣杯布局

<div class="container">
    <div class="main">中间内容</div>
    <div class="left">左侧内容</div>
    <div class="right">右侧侧内容</div>
</div>
<style>
	.container {
		width: 500px;
		margin-left: 110px;
		margin-right: 110px;
	}
	.main {
		float: left;
		width: 100%;
		height: 200px;
		background-color: gray;
	}
	.left {
		position: relative;
		float: left;
		height: 200px;
		width: 100px;
		margin-left: -100%;
		left: -110px;
		background-color: pink;
	}
	.right {
		position: relative;
		float: right;
		height: 200px;
		width: 100px;
		margin-left: -100px;
		right: -110px;
		background-color: yellow;  
	}
</style>

结果：

和双飞翼布局比较像，但代码结构比较简单，样式略微复杂

5、flex布局

<div class="container">
    <div class="main">中间内容</div>
    <div class="left">左侧内容</div>
    <div class="right">右侧侧内容</div>
</div>

<style>
    .container {
        display: flex;
        width: 500px;
    }
    .left {
        flex: 0 1 100px;
        order: -1;
        height: 200px;
        margin-right: 10px;
        background-color: pink;
    }
    .main {
        height: 200px;
        flex: 1;
        background-color: gray;
    }
    .right {
        flex: 0 1 100px;
        height: 200px;
        margin-left: 10px;
        background-color: yellow;  
    }
</style>

结果：

主流布局方式，需要考虑浏览器兼容

6、table布局

<div class="container">
    <div class="left">左侧内容</div>
    <div class="main">中间内容</div>
    <div class="right">右侧侧内容</div>
</div>

<style>
    .container {
        display: table;
        width: 500px;
    }
    .left, .main, .right {
        display: table-cell;
    }
    .left {
        height: 200px;
        width: 100px;
        background-color: pink;
    }
    .main {
        height: 200px;
        background-color: gray;
    }
    .right {
        height: 200px;
        width: 100px;
        background-color: yellow;  
    }
</style>

结果：

缺点：无法设置margin设置间距

7、绝对定位布局

<div class="container">
    <div class="main">中间内容</div>
    <div class="left">左侧内容</div>
    <div class="right">右侧侧内容</div>
</div>

<style>
    .container {
        position: relative;
        width: 500px;
    }
    .main {
        height: 200px;
        margin: 0 110px;
        background-color: gray;
    }
    .left {
        position: absolute;
        left: 0;
        top: 0;
        height: 200px;
        width: 100px;
        background-color: pink;
    }
    
    .right {
        position: absolute;
        right: 0;
        top: 0;
        height: 200px;
        width: 100px;
        background-color: yellow;  
    }
</style>

结果：

参考这篇大佬https://zhuanlan.zhihu.com/p/25070186?refer=learncoding