圣杯布局-三种实现方式，css经典布局-CSDN博客

　　CSS圣杯布局和双飞翼布局都是三栏布局，其中主要内容区域在最中间，左右两侧是侧边栏。它们的目的是为了解决传统三栏布局固定中间宽度，侧边栏无法等高的问题。

　　CSS圣杯布局的实现：

　　HTML结构如下：

　　```

　　

　　```

　　CSS样式如下：

　　```

　　.container {

　　display: table;

　　width: 100%;

　　table-layout: fixed;

　　border-spacing: 0;

　　}

　　.main {

　　display: table-cell;

　　width: 100%;

　　background-color: #fff;

　　}

　　.left {

　　display: table-cell;

　　width: 200px;

　　background-color: #ccc;

　　position: relative;

　　left: -200px;

　　margin-left: -100%;

　　}

　　.right {

　　display: table-cell;

　　width: 200px;

　　background-color: #ccc;

　　position: relative;

　　right: -200px;

　　margin-right: -100%;

　　}

　　```

　　实现原理：通过将容器设置为table，主要内容区域和侧边栏都设置为table-cell，实现三栏等高。通过设置负的margin和left/right来实现侧边栏的位置偏移。

　　双飞翼布局的实现：

　　HTML结构如下：

　　```

　　

　　

　　

　　```

　　CSS样式如下：

　　```

　　.container {

　　padding-left: 200px;

　　padding-right: 200px;

　　}

　　.main {

　　float: left;

　　width: 100%;

　　background-color: #fff;

　　}

　　.left {

　　float: left;

　　width: 200px;

　　margin-left: -100%;

　　background-color: #ccc;

　　}

　　.right {

　　float: left;

　　width: 200px;

　　margin-left: -200px;

　　background-color: #ccc;

　　}

　　```

　　实现原理：通过设置主要内容区域的宽度为100%，再通过padding将左右两侧的宽度撑开。通过设置负的margin和left来实现侧边栏的位置偏移。