本篇文章主要介绍本人最近在CSS学习中总结出的常用的二列&三列布局的几种方法
二列&三列布局：
image.png
二列布局的特征通常是侧栏固定宽度，主栏自适应宽度
三列布局的特征通常是两边侧栏固定宽度，主栏自适应宽度
实现方式有以下几种：
a. 浮动布局
原理：首先分别给两边侧栏左右浮动，然后中间主栏设置左右margin给两边侧栏留出空间，主栏自适应宽度
DOM文档：
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
CSS文档:
.left{
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.right{
float: right;
width: 200px;
height: 100px;
background-color: green;
}
.main{
height: 100px;
background-color: red;
margin-left: 120px;
margin-right: 220px;
}
说明：
*如果是二列布局，则去掉一边侧栏，主栏取消那一边的margin设置。
*注意DOM顺序，要先写两边侧栏，如果先写主栏的话会将侧栏挤到下一列。
*这种布局的缺点是页面会首先渲染侧栏再渲染主栏。
b. 绝对定位布局
原理：通过绝对定位将两边侧栏固定，同样中间主栏设置margin给侧栏腾空间，中间主栏自适应。
DOM文档：
<div class="container">
<div class="main"></div>
<div class="right"></div>
<div class="left"></div>
</div>
CSS文档：
.container{
position: relative;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
.right{
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 0;
right: 0;
}
.main{
height: 100px;
background-color: red;
margin-left: 120px;
margin-right: 220px;
}
说明：
*如果是二列布局，则去掉一边侧栏，主栏取消那一边的margin设置。
*浏览器窗口小到一定程度时，主栏与侧栏会发生重叠。
c. 圣杯布局
原理：
首先给主栏和侧栏都加上左浮动，主栏宽度设置100%，此时左右侧栏均被挤下去；
然后给左侧栏一个margin-left:-100%，左侧栏会从主栏的下面拉到与主栏对齐的左边，给右侧栏一个margin-left:自身宽度，右侧栏会从主栏的下面拉到与主栏对齐的右边；
此时左右侧栏会挡住主栏的左右两边部分，所以在外层设置左右padding减小主栏宽度，给两边侧栏腾出空间，但是左右侧栏会跟着缩小的主栏一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。
DOM文档：
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS文档：
.main{
background-color: red;
float: left;
width: 100%;
height: 100px;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin-left: -100%;
position: relative;
left: -100px
}
.right{
width: 200px;
height: 100px;
background-color: green;
float: left;
margin-left: -200px;
position: relative;
right: -200px
}
.container{
padding: 0 200px 0 100px;
}
说明：
*如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的padding-right值，其他操作相同。反之亦然。
*书写顺序不能更改
*当主栏宽度小于侧栏宽度时布局会乱，可以设置主栏的min-width或者使用双飞翼布局。
d. 双飞翼布局
原理：与圣杯布局相似，都利用了浮动和负边距，但是在main外面加了一层div，由于侧栏的负边距是相对这个外层div的，所以给main设置左右margin是不会影响左右侧栏，也就省去定位的步骤了。
DOM文档：
<div class="container">
<div class="wrape">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS文档：
.wrape{
float: left;
width: 100%;
}
.main{
margin: 0 200px 0 100px;
background-color: red;
height: 100px;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin-left: -100%;
/* position: relative;
left: -100px */
}
.right{
width: 200px;
height: 100px;
background-color: green;
float: left;
margin-left: -200px;
/* position: relative;
right: -200px */
}
说明：
*如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置main-wrap的margin-right值，其他操作相同。反之亦然。
*解决了圣杯布局main的最小宽度不能小于左侧栏的缺点.
e. flex布局
DOM文档：
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS文档：
.container{
display: flex;
}
.main {
flex: 1;
height: 300px;
background-color: red;
}
.left {
order: -1;
margin-right: 20px;
height: 300px;
background-color: blue;
}
.right {
margin-left: 20px;
height: 300px;
background-color: green;
}
说明：
*如果要实现二列的话，直接去掉单边侧栏即可。
*传统布局步骤复杂繁琐，而flex布局的flex容器利用实际可用空间动态地调整子元素宽高比和顺序，简单实用，但需要考虑浏览器的兼容性。
网友评论