整理了一些布局的实现方案，算是笔记，发到博客上也希望能帮助到一些有需要的人。

注：文中列出的只是核心代码，在实际应用中可能还需加入”width”/“height”/“bancground-color”等css样式。

居中布局

元素水平居中

之后的布局讲解将以下面的这段代码为模板

1
2
3
<div class="parent">
    <div class="child">DEMO</div>
</div>

inline-block + text-align

1
2
3
4
5
6
7
8
9
10
11
.child{
    display: inline-block;
    text-align: left;
}
.parent{
    text-align: center;
}
/*
优点：兼容性较好，可以兼容到IE6、IE7，但IE6、IE7不支持inline-block，需要用其他方法实现IE6/7中的inline-block。
缺点：如果不想文字水平居中需单独设置child的text-align，因此会产生额外的代码来修复text-align:center造成的一些问题。
*/

table + margin

1
2
3
4
5
6
7
8
.child{
    display: table;
    margin: 0 auto;
}
/*
优点：只对child设置样式，不影响parent，兼容到IE8级以上浏览器。
缺点：IE6/7不支持display:table属性，但可以通过把<div>结构换成<table>结构来实现兼容。
*/

absolute + transform

1
2
3
4
5
6
7
8
9
10
11
12
.parent{
    position:relative;
}
.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/*
优点：绝对定位脱离文档流，因此居中对象不会对其他元素产生影响
缺点：transform不支持IE6/7/8，因此兼容性较差，在高版本浏览器中可能需要加私有前缀
*/

flex + justify-content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*方法一*/
.parent{
    display: flex;
    justify-content: center;
}

/*方法二*/
.parent{
    display: flex;
}
.child{
    margin: 0 auto;
}
/*
优点：只对parent元素修改，不影响child的样式
缺点：flex不支持IE6/7/8，因此兼容性较差
*/

元素的垂直居中

table-cell + vertical-align

1
2
3
4
5
6
7
8
.parent{
    display: table-cell;
    vertical-align: middle;
}
/*
优点：支持IE8及以上版本浏览器
缺点：如果需要支持IE6/7，要将<div>结构换成<table>结构
*/

absolute + transform

1
2
3
4
5
6
7
8
9
10
11
12
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
/*
优点：绝对定位脱离文档流，因此居中对象不会对其他元素产生影响
缺点：transform不支持IE6/7/8，因此兼容性较差，在高版本浏览器中可能需要加私有前缀
*/

flex + align-items

1
2
3
4
5
6
7
8
.parent{
    display: flex;
    align-items: center;
}
/*
优点：只对parent元素修改，不影响child的样式
缺点：flex不支持IE6/7/8，因此兼容性较差
*/

元素的水平垂直居中（元素宽高都未知）

inline-block + text-align + table-cell + vertical-align

1
2
3
4
5
6
7
8
9
10
11
12
.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}
/*
优点：兼容性较高，支持IE8及以上浏览器
缺点：如果需要支持IE6/7，要将<div>结构换成<table>结构
*/

absolute + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}
/*
优点：绝对定位脱离文档流，因此居中对象不会对其他元素产生影响
缺点：transform不支持IE6/7/8，因此兼容性较差，在高版本浏览器中可能需要加私有前缀
*/

flex + justify-content + align-items

1
2
3
4
5
6
7
8
9
.parent{
    display: flex;
    justify-content: center;
    align-items:center;
}
/*
优点：只设置parent，不影响child
缺点：兼容性较差，可能只有高版本浏览器能实现
*/

多列布局

一列定宽一列自适应布局

之后的布局讲解将以下面的这段代码为模板,如模版有变动将单独列出。

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

float + margin

1
2
3
4
5
6
7
8
9
10
11
.left{
    float: left;
    width: 100px;
}
.right{
    margin-left: 120px;/*多的20px为列之间的空隙*/
}
/*
优点：容易理解
缺点：兼容性有一点小问题，IE6中，因为left浮动，right不浮动，右边的文字会往右缩进3像素，解决方法：在left的css中加入"margin-right: -100px;"。清除浮动会打乱布局
*/

改进上述方法，解决兼容性问题

此结构只适用于float + margin + (fix)方法

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right-fix">
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

float + margin + (fix)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.left{
    float: left;
    width: 100px;
    position: relative;
}
.right-fix{
    float: right;
    width: 100%;
    margin-left:-100px;
}
.right{
    margin-left: 120px;
}
/*
优点：兼容IE6及以上所有浏览器
缺点：结构、样式会相对复杂
*/

float + overflow

1
2
3
4
5
6
7
8
9
10
11
12
.left{
    float: left;
    width: 100px;
    margin-right: 20px;/20px为列之间的空隙/
}
.right{
    overflow: hidden;
}
/*
优点：样式简单
缺点：IE6不支持
*/

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent{
    display: table;
    width: 100%;
    table-layout:fixed;/提升渲染速度，布局优先/
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;/20px为列之间的空隙,table-cell无法设置margin，所以设置padding/
}
/*
优点：兼容IE8及以上浏览器
缺点：代码比较复杂
*/

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent{
    display: flex;
}
.left{
    width: 100px;
    margin-right: 20px;/20px为列之间的空隙/
}
.right{
    flex: 1;
}
/*
优点：实现比较容易
缺点：低版本浏览器兼容性较差，flex只适合小范围布局，
*/

两列定宽一列自适应布局

此结构只适用于下面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
    <p>center</p>
    </div>
    <div class="right-fix">
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

float + overflow

1
2
3
4
5
6
7
8
.left,.center{
    float: left;
    width: 100px;
    margin-right: 20px;/20px为列之间的空隙/
}
.right{
    overflow: hidden;
}

一列不定宽一列自适应布局

之后的布局讲解将以下面的这段代码为模板,如模板有变动将单独列出

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

float + overflow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.left,.center{
    float: left;
    margin-right: 20px;/*20px为列之间的空隙*/
}
.right{
    overflow: hidden;
}
.left p{
    width:200px;/*这里的宽度可以随意更改,即由内容决定*/
}
/*
优点：代码量少，实现简单
缺点：在IE6下兼容性有问题
*/

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent{
    display: table;
    width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;/*写成0.1%是出于兼容性考虑，1px在IE8下会有问题*/
    padding-right: 20px;/*20px为列之间的空隙,table-cell无法设置margin，所以设置padding*/
}
.left p{
    width: 200px;/*这里的宽度可以随意更改,即由内容决定*/
}
/*
优点：兼容IE8及以上浏览器
缺点：IE6/7不支持
*/

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent{
    display: flex;
}
.left{
    margin-right: 20px;/20px为列之间的空隙/
}
.right{
    flex: 1;
}
.left p{
    width: 100px;/根据内容决定/
}
/*
优点：实现比较容易
缺点：低版本浏览器兼容性较差，flex只适合小范围布局
*/

两列不定宽加一列自适应

此结构只适用于下面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
    <p>center</p>
    </div>
    <div class="right-fix">
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
</div>

float + overflow

1
2
3
4
5
6
7
8
.left,.center{
    float: left;
    width: 100px;
    margin-right: 20px;/*20px为列之间的空隙*/
}
.right{
    overflow: hidden;
}

等分布局

之后的布局讲解将以下面的这段代码为模板,如模板有变动将单独列出

1
2
3
4
5
6
<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>

float

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;/*可以让设置的宽度包含padding*/
}
/*
优点：兼容IE8及以上浏览器
缺点：当列数发生变化时需要修改css样式
*/

table

此模板只适用于table布局

1
2
3
4
5
6
7
8
<div class="parent-fix">
    <div class="parent">
        <div class="column"><p>1</p></div>
        <div class="column"><p>2</p></div>
        <div class="column"><p>3</p></div>
        <div class="column"><p>4</p></div>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent-fix{
    margin-left: -20px;
}
.parent{
    display: table;
    width:100%;
    table-layout:fixed;/*布局优先，单元格自动平分*/
}
.column{
    display: table-cell;
    padding-left: 20px;
}
/*
优点：列数改变自动平分
缺点：结构更加复杂
*/

flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent{
    display: flex;
}
.column{
    flex: 1;
}
.column+.column{
/*这个选择器表示选择前一个class为'column'的下一个'column'*/
    margin-left: 20px;
}
/*
优点：代码量少，自动平分
缺点：兼容性较差
*/

等高布局

之后的布局讲解将以下面的这段代码为模板,如模板有变动将单独列出

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent{
    display: table;
    width: 100%;
    table-layout:fixed;/*提升渲染速度，布局优先*/
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;/*20px为列之间的空隙,table-cell无法设置margin，所以设置padding*/
}
/*
背景颜色默认会覆盖在padding区域内，使空隙无法看出，需设置background-clip:content-box;使背景颜色只显示在内容区域内
*/

flex(flex布局默认等高)

1
2
3
4
5
6
7
8
9
10
11
12
.parent{
    display: flex;
}
.left{
    margin-right: 20px;/*20px为列之间的空隙*/
}
.right{
    flex: 1;
}
.left p{
    width: 100px;/*根据内容决定*/
}

float

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    float: left;
    width: 100px;
    margin-right;
}
.right{
    overflow: hidden;
}
/*
优点：兼容性好
缺点：伪等高，视觉上等高，实际不等高
*/

全屏布局

之后的布局讲解将以下面的这段代码为模板,如模板有变动将单独列出

1
2
3
4
5
6
<div id="parent">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
</div>

position(scroll)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html,body,#parent{
    height:100%;
    overflow:hidden;
}
.top{
    position:absolute;top:0;left:0;right:0;height:100px;
}
.bottom{
    position:absolute;left:0;right:0;bottom:0;height:50px;
}
.left{
    position:absolute;left:0;top:100px;bottom:50px;width:200px;
}
.right{
    position:absolute;overflow:auto;left:200px;top:100px;bottom:50px;
}
/*
IE6不支持position，如需百分比显示布局的大小，只需将代码中的具体像素改为百分比
*/

flex

此模板只适用于该案例

1
2
3
4
5
6
7
8
<div class="parent">
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
html,body,.parent{
    height:100%;
    overflow:hidden;
    margin:0;
}
.parent{
    display:flex;
    flex-direction:column;
}
.top{
    height:100px;
    background-color:black;
}
.bottom{
    height:50px;
}
.middle{
    flex-grow:1;
    display:flex;
}
.left{
    width:200px;
}
.right{
    flex-grow:1;
    overflow:auto;
}
/*
IE9及以下浏览器不兼容，如需百分比显示布局的大小，只需将代码中的具体像素改为百分比
*/

全适应布局

position无法实现全适应布局，只能用flex或grid实现，这里只介绍flex实现方法。

此模板只适用于该案例

1
2
3
4
5
6
7
8
<div class="parent">
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html,body,.parent{
    height:100%;
    overflow:hidden;
}
.parent{
    display:flex;
    flex-direction:column;
}
.middle{
    flex-grow:1;
    display:flex;
}
.right{
    flex-grow:1;
    overflow:auto;
}
/*
IE9及以下浏览器不兼容
*/