css 列 布局,CSS二列&三列布局

本篇文章主要介绍本人最近在CSS学习中总结出的常用的二列&三列布局的几种方法

二列&三列布局：

image.png

二列布局的特征通常是侧栏固定宽度，主栏自适应宽度

三列布局的特征通常是两边侧栏固定宽度，主栏自适应宽度

实现方式有以下几种：

a. 浮动布局

原理：首先分别给两边侧栏左右浮动，然后中间主栏设置左右margin给两边侧栏留出空间，主栏自适应宽度

DOM文档：

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文档：

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文档：

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文档：

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文档：

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容器利用实际可用空间动态地调整子元素宽高比和顺序，简单实用，但需要考虑浏览器的兼容性。