六种方法实现CSS三栏布局

方法一：浮动+margin

实现方法：左栏向左浮动，右栏向右浮动，中间栏不设宽度，用左右margin来撑开距离。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS三栏布局</title><style>body {margin: 0;padding: 0;}.left {width: 200px;height: 300px;background-color: #DC698A;float: left;}.right {width: 300px;height: 500px;background-color: #3EACDD;float: right;}.middle {height: 800px;background-color: #8CB08B;margin: 0 300px 0 200px;}</style></head><body><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></body>
</html>

注意：该方法在html布局时，要把中间栏放在左栏，右栏的后面，左栏和右栏的顺序不定。这就导致主列所显示的主页面无法率先加载，影响用户体验。

方法二：绝对定位法

实现方法：左栏，右栏绝对定位，分别固定到页面左右两侧，中间栏宽度自适应，用左右margin来撑开距离。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS三栏布局</title><style>body {margin: 0;padding: 0;}.left {width: 200px;height: 300px;background-color: #DC698A;position: absolute;top: 0;left: 0;}.middle {height: 800px;background-color: #8CB08B;margin: 0 300px 0 200px;}.right {width: 300px;height: 500px;background-color: #3EACDD;position: absolute;top: 0;right: 0;}</style></head><body><div class="left">左栏</div><div class="middle">中间栏</div><div class="right">右栏</div></body>
</html>

方法三：浮动+margin负值法

实现方法：左右两栏宽度固定，中间栏宽度100%，中间栏，左栏，右栏向左浮动，左栏的margin-left设为-100%，右栏的margin-left设为-右栏宽度。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS三栏布局</title><style>body {margin: 0;padding: 0;}.middle {width: 100%;height: 500px;background-color: #8CB08B;float: left;}.left {width: 200px;height: 500px;background-color: #DC698A;float: left;margin-left: -100%;}.right {width: 300px;height: 500px;background-color: #3EACDD;float: left;margin-left: -300px;}</style></head><body><div class="middle">中间栏</div><div class="left">左栏</div><div class="right">右栏</div></body>
</html>

注意：该方法在html布局时，要把中间栏放在第一个，但这种情况会出现左右列覆盖中间列的情况。

方法四：圣杯布局

实现方法：在上一个方法的基础上增加了padding-left，padding-right，position:relative。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS三栏布局</title><style>body {margin: 0;padding: 0;}.container {padding-left: 200px;padding-right: 300px;}.middle {width: 100%;height: 800px;background-color: #8CB08B;float: left;}.left {width: 200px;height: 500px;background-color: #DC698A;float: left;margin-left: -100%;position: relative;left: -200px;}.right {width: 300px;height: 500px;background-color: #3EACDD;float: left;margin-left: -300px;position: relative;right: -300px;}</style></head><body><div class="container"><div class="middle">中间栏</div><div class="left">左栏</div><div class="right">右栏</div></div></body>
</html>

此方法的优点是主列率先加载，允许任何列是最高的。

方法五：双飞翼布局

实现方法：在第三种方法的基础上为中间列增加一个父div，让这个父div的宽度为100%，float: left，设置中间列的左右边距。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS三栏布局</title><style>body {margin: 0;padding: 0;}.wrap {width: 100%;float: left;}.middle {height: 800px;background-color: #8CB08B;margin-left: 200px;margin-right: 300px;}.left {width: 200px;height: 500px;background-color: #DC698A;float: left;margin-left: -100%;}.right {width: 300px;height: 500px;background-color: #3EACDD;float: left;margin-left: -300px;}</style></head><body><div class="wrap"><div class="middle">中间栏</div></div><div class="left">左栏</div><div class="right">右栏</div></body>
</html>

此方法优点是率先加载中间列，允许任何列是最高的。

方法六：Flex布局

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS三栏布局</title><style>body {margin: 0;padding: 0;}.container {display: flex;}.left {flex-grow: 1;height: 200px;background-color: #DC698A;}.middle {flex-grow: 3;height: 800px;background-color: #8CB08B;}.right {flex-grow: 1;height: 300px;background-color: #3EACDD;}</style></head><body><div class="container"><div class="left">左栏</div><div class="middle">中间栏</div><div class="right">右栏</div></div></body>
</html>

此方法优点：简单高效

转载于:https://www.cnblogs.com/sunshine21/p/10880904.html