左边栏
右边栏
中间栏
摘要：三栏布局浮动定位头部左边栏右边栏中间栏底部三栏布局浮动定位浮动布局效果缺点浮动元素会脱离文档流，如果在的内部还有其他元素，有可能会因为父元素的高度塌陷而导致问题。
前言
大家总是听到双飞翼布局和圣杯布局...也不知道是谁取的名字，我就叫三栏布局吧。虽然他们有些细微的区别，但本质上都是实现一个三栏布局，即左右两栏固定，中间自适应。
实现方案网上随便一搜，全是实现方案，少到两三种，多到七八种。各种方法都有优缺点，但我觉得比较实用的方法主要就那三四种，因为很多方法其实是被淘汰的或者说太麻烦（如表格布局）。
浮动方案
绝对定位方案
flex布局方案
网格布局（本章不讲）
方案一：浮动方案实现思路：
先将左右两栏进行浮动，左边栏向左浮动，右边栏向右浮动就能固定在两边。但是要注意一点，这种方法要将中间栏放在最后，因为如果将中间栏放在中间，并且没有对自身进行浮动的话，会占据文档中的位置，导致右边栏并不能完全和左边栏平齐。
HTML：
头部
左边栏
右边栏
中间栏
SCSS:
//浮动布局
.layout {
color:white;
text-align: center;
height: 100%;
overflow: hidden;
header,footer{
width: 100%;
height: 70px;
background: rgb(202,132,2);
}
footer {
position: absolute;
bottom: 0;
}
main {
width: 100%;
height: 100%;
background: red;
.left,.right {
width: 300px;
height: 100%;
background: rgb(14, 214, 171);
}
.left {
float:left;
}
.right{
float:right;
}
.center {
height:100%;
background: rgb(26, 26, 122);
}
}
}
效果：
缺点：
浮动元素会脱离文档流，如果在的内部还有其他元素，有可能会因为父元素的高度塌陷而导致问题。所以要么给父元素设置高度，要么就要清除浮动了。
实现思路：
将左右两栏进行绝对定位，固定在左右两边，中间栏通过左右margin距离来适应宽度。同样，这种方法要注意中间栏在HTML结构中的位置，如果中间栏在中间，那么中间栏也要进行绝对定位，如果在最后面则不需要进行绝对定位。
HTML：
绝对定位方案
左边栏
右边栏
中间栏
SCSS：
// 绝对定位布局
.layout {
color:white;
text-align: center;
height: 100%;
overflow: hidden;
header,footer{
width: 100%;
height: 60px;
background: rgb(202,132,2);
}
footer {
position: absolute;
bottom: 0;
}
main {
width: 100%;
height: 100%;
background: red;
position: relative;
.left,.right{
position: absolute;
width: 300px;
height: 100%;
background: rgba(100, 96, 87,0.5);
}
.left {
left:0
}
.right {
right:0;
//top:0;
}
.center {
height: 100%;
margin:auto 300px;
left:0;
right:0;
background: blue;
}
}
}
效果：
缺点：
绝对定位同样会脱离文档流，如果其他元素位置有要求的话，需要继续设置定位。
实现思路：
弹性布局十分简单，给最外层的父级元素设置为弹性盒子，然后设置两端对齐，中间栏的宽度设为100%即可。
HTML：
flex方案
左边栏
中间栏
右边栏
SCSS：
//flex布局
.layout {
color:white;
text-align: center;
height: 100%;
overflow: hidden;
header,footer{
width: 100%;
height: 60px;
background: rgb(202,132,2);
text-align: center;
}
footer {
position: absolute;
bottom: 0;
}
main {
width: 100%;
height: 100%;
background: red;
display:flex;
justify-content: space-between;
.left,.right {
width: 300px;
height: 100%;
background: rgb(18, 157, 167);
}
.center {
width: 100%;
height:100%;
background: blue;
}
}
}
效果：
缺点：
flex是CSS3才有的，浏览器兼容性最低到IE8。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114572.html
摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏左浮右栏右浮，中间不 本文由云+社区发表作者：前端林子 本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法 实现方法：需要左栏向左浮...
摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏左浮右栏右浮，中间不 本文由云+社区发表作者：前端林子 本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法 实现方法：需要左栏向左浮...
摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏左浮右栏右浮，中间不 本文由云+社区发表作者：前端林子 本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法 实现方法：需要左栏向左浮...
摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏 本文由云+社区发表 作者：前端林子 本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法 实现方法：需要左栏向左浮...
阅读 1561·2023-04-26 02:32
阅读 459·2021-11-18 13:12
阅读 2296·2021-10-20 13:48
阅读 2393·2021-10-14 09:43
阅读 3619·2021-10-11 10:58
阅读 3207·2021-09-30 10:00
阅读 2808·2019-08-30 15:53
阅读 3393·2019-08-30 15:53
