三栏布局是前端学习必须了解的东西，重要性不言而喻。这里详细介绍七种三栏布局方案:
绝对布局法
<
div class=
"wrap">
<
div class=
"main"></
div>
<
div class=
"left"></
div>
<
div class=
"right"></
div>
</
div>
.wrap{
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 300px;
background-color: rgba(255, 0, 0, 0.356);
height: 400px;
}
.right{
position: absolute;
right: 0;
top: 0;
width: 300px;
height: 400px;
background-color: rgba(255, 0, 0, 0.356);
}
.main{
height: 400px;
margin: 0 300px;
background-color: rgb(223, 211, 41);
}
总结：三个div顺序可以任意调整，布局容易理解。
流动布局
<
div class=
"wrap">
<
div class=
"left"></
div>
<
div class=
"right"></
div>
<
div class=
"main"></
div>
</
div>
.left{
float: left;
width: 300px;
height: 400px;
background-color: rgba(255, 0, 0, 0.356);
}
.right{
float: right;
width: 300px;
height: 400px;
background-color: rgba(255, 0, 0, 0.356);
}
.main{
margin-left: 300px;
margin-right: 300px;
height: 400px;
background-color: rgb(223, 211, 41);
}
总结：主体div放在最后，左右两栏div顺序任意，代码简单，但要避免主体main部分clear样式。
BFC布局
<
div class=
"wrap">
<
div class=
"left"></
div>
<
div class=
"right"></
div>
<
div class=
"main"></
div>
</
div>
.left{
float: left;
width: 300px;
height: 400px;
background-color:rgba(255, 0, 0, 0.356);
}
.right{
float: right;
width: 300px;
height: 400px;
background-color:rgba(255, 0, 0, 0.356);
}
.main{
height: 400px;
overflow: hidden;
background-color:rgb(223, 211, 41);
}
总结：主体div放在最后，通过 overflow 属性产生BFC, main 内子元素不容易改变整体布局。
圣杯布局
<
div class=
"wrap">
<
div class=
"main"></
div>
<
div class=
"left"></
div>
<
div class=
"right"></
div>
</
div>
.wrap{
height: 400px;
padding-left: 300px;
padding-right: 300px;
}
.main{
float: left;
width: 100%;
background-color: rgb(223, 211, 41);
height: 400px;
}
.left{
float: left;
height: 400px;
width: 300px;
margin-left: -100%;
position: relative;
left:-300px;
background-color: rgba(255, 0, 0, 0.356);
}
.right{
float: left;
height: 400px;
width: 300px;
margin-left: -300px;
position: relative;
right: -300px;
background-color: rgba(255, 0, 0, 0.356);
}
总结：主体div放在最前面，优先渲染主体部分。同时用到了定位。’
双飞燕布局
<
div class=
"center">
<
div class=
"main"></
div>
</
div>
<
div class=
"left"></
div>
<
div class=
"right"></
div>
.center{
float: left;
width: 100%;
}
.main{
float: left;
width: 100%;
margin-left: 300px;
margin-right: 300px;
background-color: rgb(223, 211, 41);
height: 400px;
}
.left{
float: left;
height: 400px;
width: 300px;
margin-left: -100%;
background-color: rgba(255, 0, 0, 0.356);
}
.right{
float: left;
height: 400px;
width: 300px;
margin-left: -300px;
background-color: rgba(255, 0, 0, 0.356);
}
总结：同圣杯布局一样，但没有用定位,增加一个div标签
Flex布局
<
div class=
"wrap">
<
div class=
"main"></
div>
<
div class=
"left"></
div>
<
div class=
"right"></
div>
</
div>
.wrap{
display: flex;
}
.left{
flex: 0 1 300px;
background-color: rgba(255, 0, 0, 0.356);
order: -1;
height: 400px;
}
.right{
flex: 0 1 300px;
background-color: rgba(255, 0, 0, 0.356);
order: 1;
height: 400px;
}
.main{
flex: 1;
background-color: rgb(223, 211, 41);
height: 400px;
}
总结：Flex布局具有很多优点，相信未来会广泛使用的。
阮一峰关于Flex的布局教程： Flex 布局教程：语法篇 Flex 布局教程：实例篇
Grid布局
<
div class=
"wrap">
<
div class=
"left"></
div>
<
div class=
"main"></
div>
<
div class=
"right"></
div>
</
div>
.wrap{
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 400px;
}
.left{
background-color: rgba(255, 0, 0, 0.356);
}
.right{
background-color: rgba(255, 0, 0, 0.356);
}
.main{
background-color: rgb(223, 211, 41);
}
总结：非常不错。 简书上一篇不错的文章： Grid布局指南
最后：日后会回来补充详细的。
