圣杯布局
实现方法
1、HTML 结构中，中间内容区域优先渲染。
2、使用 float 使三列浮动。
3、对左右两列使用负边距，使其上浮到中间列的两侧。
4、使用相对定位调整左右两列的位置。
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>圣杯布局示例</title><style>body {min-width: 550px;}#container {padding-left: 200px;padding-right: 150px;}#container .column {float: left;}#center {width: 100%;}#left {width: 200px;margin-left: -100%;position: relative;right: 200px;}#right {width: 150px;margin-right: -150px;}#footer {clear: both;}</style></head><body><div id="header">Header</div><div id="container"><div id="center" class="column">Center</div><div id="left" class="column">Left</div><div id="right" class="column">Right</div></div><div id="footer">Footer</div></body>
</html>
双飞翼布局
实现方法
1、HTML 结构中，中间内容区域优先渲染，并包含一个内部容器。
2、使用 float 使三列浮动。
3、对左右两列使用负边距，使其上浮到中间列的两侧。
4、使用内部容器的 margin 为左右两列腾出空间。
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>双飞翼布局示例</title><style>body {min-width: 550px;}.column {float: left;}#main {width: 100%;}#main-wrap {margin: 0 190px 0 190px;}#left {width: 190px;margin-left: -100%;}#right {width: 190px;margin-left: -190px;}</style></head><body><div id="header">Header</div><div id="main" class="column"><div id="main-wrap">Center</div></div><div id="left" class="column">Left</div><div id="right" class="column">Right</div><div id="footer">Footer</div></body>
</html>
Flex 布局
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>Flex 三栏布局示例</title><style>body {display: flex;flex-direction: column;min-height: 100vh;margin: 0;}#header,#footer {background-color: #f0f0f0;padding: 20px;}#content {display: flex;flex: 1;}#left,#right {background-color: #e0e0e0;width: 200px;}#left {order: -1;}#center {flex: 1;background-color: #d0d0d0;padding: 20px;}</style></head><body><div id="header">Header</div><div id="content"><div id="center">Center</div><div id="left">Left</div><div id="right">Right</div></div><div id="footer">Footer</div></body>
</html>
