双飞翼HTML圣杯布局,圣杯布局与双飞翼布局

圣杯布局和双飞翼布局的布局要求

三列布局，两边宽度固定，中间宽度自适应

中间栏在浏览器中要优先渲染 (这就对DOM结构有了要求，center的div必须在最上面)

允许任意列的高度最高

圣杯布局

CSS布局

body {

// min-widthd的计算为 left-div-width * 2 + right-div-width

// 因为在left-div之中采用了relative定位(也可以使用transform)

// 200 * 2 + 150

min-width: 550px;

}

// 或者也可在container上设置min-width

#container {

padding-left: 200px;

padding-right: 150px;

}

#container::after {

content: '';

display: block;

visibility: hidden;

clear: both;

}

#container .column {

float: left;

}

#center {

width: 100%;

background: yellow;

}

#left {

width: 200px;

margin-left: -100%;

position: relative;

left: -200px;

background: aqua;

}

#right {

width: 150px;

margin-right: -150px;

background: aqua;

}

#footer {

clear: both;

}

DOM结构

center

left

right

双飞翼布局

双飞翼CSS代码

body {

// 对于双飞翼布局而言，min-width的计算只需要left-div-width + right-div-width即可

// 此处为200 + 150

// 但为了实际效果增加了一定的宽度

min-width: 500px;

}

#container {

width: 100%;

}

.column {

float: left;

}

#center {

margin-left: 200px;

margin-right: 150px;

}

#left {

width: 200px;

margin-left: -100%;

}

#right {

width: 150px;

margin-left: -150px;

}

#footer {

clear: both;

}

双飞翼DOM结构

使用box-sizing可以去掉container

新的CSS布局

body {

min-width: 500px;

}

.column {

float: left;

}

// 利用padding取代margin

// 但是存在一个问题就是padding是可能有颜色的，若padding有颜色且两边的不足以盖掉padding的高度时会有缺陷

#center {

padding-left: 200px;

padding-right: 150px;

box-sizing: border-box;

width: 100%;

}

#left {

width: 200px;

margin-left: -100%;

}

#right {

width: 150px;

margin-left: -150px;

}

#footer {

clear: both;

}

新的DOM结构

使用flex布局

flex布局的CSS代码

#container {

display: flex;

}

#center {

flex: 1;

}

#left {

// flex: flex-grow flex-shrink flex-basis

flex: 0 0 200px;

// order属性用于改变div的顺序

order: -1;

}

#right {

flex: 0 0 150px;

}

flex布局的DOM结构

使用绝对定位来进行布局

实现三栏水平布局之绝对定位布局

.container{

position: relative;

}

.main,.right,.left{

top: 0;

height: 130px;

}

.main{

margin: 0 300px 0 200px;

background-color: blue;

}

.right{

position: absolute;

width: 300px;

right: 0;

background-color: red;

}

.left{

position: absolute;

width: 200px;

background-color: green;

left: 0;

}

// 注意此处会出现问题，因为此处的main区块并没有使用float或是绝对定位，所以在main之前的空格字符会占据一行，此时的三栏顶部是不对齐的，可以将空格去掉或是将父元素的字体大小设为0来解决这个问题。

main

left

right

利用BFC原理来实现圣杯布局

BFC原理中指出，BFC块不与外部float的块有重叠部分，所以可以让左右两栏float，且宽度固定，中间栏是一个BFC，实现中间栏自适应

总结

对比双飞翼布局和圣杯布局可以发现，圣杯布局的DOM结构更易理解，但是所需的min-width较大，这是由于左边的div采用了margin-left和relative的结果，导致在计算min-width时需要计算两边左边div的宽度。

若不考虑兼容性问题，那么使用border-box和flex两者是最简单的

作者：XJBT