本文主要是介绍三栏布局----方法总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
三栏布局介绍：
三栏布局，顾名思义就是两边固定宽度，中间内容宽度岁浏览器宽度自适应。如，打开某东首页：
三栏布局方法：
方法一：浮动布局
注： 浮动元素脱离了文档流，根据实际情况使用时清除浮动。
<!DOCTYPE html>
<html lang="en">
<head><style>h1 {text-align: center;}.container {width: 100%;height: 200px;}.left {width: 200px;height: 100%;background-color: red;float: left;}.right {width: 200px;height: 100%;background-color: red;float: right;}.main {height: 100%;margin-left: 200px;margin-right: 200px;background-color: yellow;}</style>
</head>
<body><h1>三栏布局---第一种浮动布局</h1><div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div>
</body>
</html>
方法二：绝对定位布局
简单实用，并且主要内容可以优先加载。
<!DOCTYPE html>
<html lang="en">
<head><style>h1 {text-align: center;}.container {width: 100%;height: 200px;position: relative;}.left {width: 200px;height: 100%;background-color: red;position: absolute;left: 0;top: 0;}.right {width: 200px;height: 100%;background-color: red;position: absolute;right: 0;top: 0;}.main {height: 100%;margin-left: 200px;margin-right: 200px;background-color: yellow;}</style>
</head>
<body><h1>三栏布局---第二种绝对定位布局</h1><div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div>
</body>
</html>方法三：BFC布局
注：BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。缺点：主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。
<!DOCTYPE html>
<html lang="en">
<head><style>h1 {text-align: center;}.container {width: 100%;height: 200px;}.left {width: 200px;height: 100%;background-color: red;float: left;}.right {width: 200px;height: 100%;background-color: red;float: right;}.main {height: 100%;overflow: hidden;background-color: yellow;}</style>
</head>
<body><h1>三栏布局---第三种BFC（块级格式上下文）布局</h1><div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div>
</body>
</html>
方法四：双飞翼布局
主体内容可以优先加载，HTML 代码结构稍微复杂点。
<!DOCTYPE html>
<html lang="en">
<head><style>.content {float: left;width: 100%;}.main {height: 200px;margin-left: 200px;margin-right: 200px;background-color: green;}.left {float: left;height: 200px;width: 200px;margin-left: -100%;background-color: red;}.right {width: 200px;height: 200px;float: right;margin-left: -200px;background-color: blue;}</style>
</head>
<body><h1>三栏布局---第四种双飞翼布局</h1><div class="content"><div class="main"></div></div><div class="left"></div><div class="right"></div>
</body>
</html>
方法五：圣杯布局
和双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。
<!DOCTYPE html>
<html lang="en">
<head><style>.container {margin-left: 200px;margin-right: 200px;}.main {float: left;width: 100%;height: 200px;background-color: red;}.left {float: left;width: 200px;height: 200px;margin-left: -100%;position: relative;left: -200px;background-color: blue;}.right {float: left;width: 200px;height: 200px;margin-left: -200px;position: relative;right: -200px;background-color: green;}</style>
</head>
<body><h1>三栏布局---第五种圣杯布局</h1><div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>
</body>
</html>方法六：flex布局
需要考虑浏览器的兼容性
<!DOCTYPE html>
<html lang="en">
<head><style>.container {display: flex;}.main {flex-grow: 1;height: 200px;background-color: red;}.left {order: -1;flex: 0 1 200px;height: 200px;background-color: blue;}.right {flex: 0 1 200px;height: 200px;background-color: green;}</style>
</head>
<body><h1>三栏布局---第六种flex布局</h1><div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>
</body>
</html>
方法七：表格布局
缺点：无法设置栏间距
<!DOCTYPE html>
<html lang="en">
<head><style>.container {display: table;width: 100%;}.left,.main,.right {display: table-cell;}.left {width: 200px;height: 200px;background-color: red;}.main {background-color: blue;}.right {width: 200px;height: 200px;background-color: green;}</style>
</head>
<body><h1>三栏布局---第七种表格布局</h1><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div>
</body>
</html>以上是我整理的关于三栏布局的方法，欢迎大家补充。提出问题。谢谢。
这篇关于三栏布局----方法总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
