三栏布局

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局， 三栏布局的具体实现：

• 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

.outer { 
    position: relative; 
    height: 100px; 
} 
.left { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: tomato; 
} 
.right { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
    height: 100px; 
    background: gold; 
} 
.center { 
    margin-left: 100px; 
    margin-right: 200px; 
    height: 100px; 
    background: lightgreen; 
}

• 利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。

.outer { 
    display: flex; 
    height: 100px; 
} 
.left { 
    width: 100px; 
    background: tomato; 
} 
.right { 
    width: 100px; 
    background: gold; 
} 
.center { 
    flex: 1; 
    background: lightgreen; 
}

• 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后：

.outer { 
    height: 100px; 
} 
.left { 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: tomato; 
} 
.right { 
    float: right; 
    width: 200px; 
    height: 100px; 
    background: gold; 
} 
.center { 
    height: 100px; 
    margin-left: 100px; 
    margin-right: 200px; 
    background: lightgreen; 
}

• 圣杯布局

.outer { 
    height: 100px; 
    padding-left: 100px; 
    padding-right: 200px; 
} 
.left { 
    position: relative; 
    left: -100px; 
    float: left; 
    margin-right: -100%; 
    width: 100px; 
    height: 100px; 
    background: tomato; 
} 
.right { 
    position: relative; 
    left: 200px; 
    float: right; 
    margin-left: -200px; 
    width: 200px; 
    height: 100px; 
    background: gold; 
} 
.center {
    float: left; 
    width: 100%; 
    height: 100px; 
    background: lightgreen; 
}