Fork me on GitHub

CSS两栏布局的常用方法

发表于 | 分类于 ， |
字数统计 1,104 字 | 阅读时长 4 分钟

两栏布局作为CSS中一个比较古老的布局问题，可以用多种方法实现。在实际工作中很多人也大概跟我一样都是用的时候顺着思路写出来一个能用就行，很少仔细考虑过各个实现方法之间的那些细微的差异和特殊情况下布局的不同表现。

不过话说回来，为了写这篇博客，我也查了不少有关CSS布局的资料和文章，算是温习了很多布局方面已经被慢慢遗忘的知识。也越发觉得flex布局方式大概真的是未来网页布局的最佳解决方案，那些传统的各种不正交的CSS 概念，庞杂繁复又无趣，实在是有些反人类。

前端的各种框架类库和新技术层出不穷，工作这么长时间来，自己也接触了不少。前端构建，组件化，模块等等这些东西做久了，还真是蛮怀念当初刚入前端做切图仔的日子，虽然工资不高，工作也挺单调，但那些整天就知道傻乐的日子，也好像真的一去不复返了呢。

好了，不扯远了，说正事。

CSS的两栏布局，通常情况都是一个固定宽度的侧边栏加上一个自适应宽度的主内容栏。实现方式比较多，本文肯定不能尽述，仅对常用的方法做一个介绍。

浮动方式

float方式，也是最简单的实现两栏布局的方式。如下:

CSS
1
2
3
4
5
6
7
8
9
.container{
    width:100%;
}
.sidebar{
    float:left;
    width:220px;
}
.main{
}

双浮动方式

此种方式需要配合CSS的calc属性，从而避免无宽度元素浮动会自动缩小为最小宽度的问题。

CSS
1
2
3
4
5
6
7
8
9
10
11
.container{
    width:100%;
}
.sidebar{
    float:left;
    width:220px;
}
.main{
    float：left；
    width:calc(100% - 220px)
}

float + BFC 方式

这种方法同样利用了浮动，但通过为主内容栏设置overflow形成BFC，来达到避免被侧栏覆盖的效果。

CSS
1
2
3
4
5
6
7
8
9
10
.container{
    width:100%;
}
.sidebar{
    float:left;
    width:220px;
}
.main{
    overflow：auto；
}

行内块方式

将两栏元素都设为行内块inline-block，再通过calc属性来达到主内容区宽度自适应。

CSS
1
2
3
4
5
6
7
8
9
10
11
.container{
    width:100%;
}
.sidebar{
    display:inline-block;
    width:220px;
}
.main{
    display:inline-block;
    width:calc(100% - 220px)
}

calc方式虽然可以达到自适应的效果，但是对宽度计算比较苛刻，同时也会因为盒模型表现方式不同而出现布局问题。另外在将两栏都改为行内元素后，还需要考虑vertical-align问题。不推荐使用。

固定定位方式

为侧边栏设置固定定位，缺点是需要改变父元素的定位方式。同时因为侧边栏已脱离文档流，当高度较高时就会超出父容器，同时还需要为主内容区设置外边距保证其不会被侧边栏覆盖。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.container{
    position:relative;
}
.sidebar{
    width:220px;
    position:absolute;
    top:0;
    left:0;
}
.main{
    margin-left：220px;
}

当然也可以将两栏都设置为固定定位来达到布局效果，但这种方式比较暴力，且难以维护，不推荐。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container{
    position:relative;
    overflow:hidden;
}
.sidebar{
    width:220px;
    position:absolute;
    top:0;
    left:0;
}
.main{
    position：absolute;
    top:0;
    left:0;
    width:100%;
}

table方式

使用表格布局的方式来达到想要的效果（很久远以前的实现方式，透露着老气。。。)另外当两栏高度想要不同时，这种方法就没法用了。

CSS
1
2
3
4
5
6
7
8
9
10
.container{
    display:table;
}
.sidebar{
    display:table-cell;
    width:200px;
}
.main{
    display:table-cell;
}

flex 方式

这种方式，代码简单方便可控，兼容问题在现在也不是什么大问题了。推荐使用

1
2
3
4
5
6
7
8
9
.container{
    display:flex;
}
.sidebar{
    flex：0 0 200px;
}
.main{
    flex:0;
}

需要注意的是，flex 布局默认align-item：stretch，导致列等高。如需要不同高度，可将此属性设置为algin-item：flex-start 。

以上就是我总结的关于两栏布局的一些实现方法。感谢阅读。

ps：前端搞来搞去，还真是CSS最让人头大哈哈哈哈。

----本文结束感谢阅读----