三栏结构布局技巧，顶了
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三栏结构布局技巧，顶了相关的知识，希望对你有一定的参考价值。
CSS 七种三栏布局技巧
三栏布局，顾名思义就是两边固定，中间自适应,即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。
下面围绕的这样的目的，即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：
红色和蓝色宽度固定，绿色宽度自适应，下面七种方法实现的最终效果跟这个差不多，可能会稍有不同。
下面七种技巧各有千秋，在开发中可以根据实际需求选择适合自己的方法进行编码。
1. 流体布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
height: 200px;
width: 100px;
}
.right {
width: 200px;
height: 200px;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。
缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。
2. BFC 三栏布局
BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
height: 200px;
width: 100px;
margin-right: 20px;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: 20px;
}
.main {
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。
3. 双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
利用的是浮动元素 margin 负值的应用，感兴趣的同学可以上网搜搜原理。
主体内容可以优先加载，HTML 代码结构稍微复杂点。
4. 圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>七彩新闻网http://www.qicainews.cn/
跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。
5. Flex 布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
}
.main {
flex-grow: 1;
height: 300px;
}
.left {
order: -1;
flex: 0 1 200px;
margin-right: 20px;
height: 300px;
}
.right {
flex: 0 1 100px;
margin-left: 20px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
简单实用，未来的趋势，需要考虑浏览器的兼容性。
6. Table 布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: table;
width: 100%;
}
.left, .main, .right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
}
.main {
}
.right {
width: 100px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
缺点：无法设置栏间距
7. 绝对定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
position: relative;
}
.main {
height: 400px;
margin: 0 120px;
}
.left {
position: absolute;
width: 100px;
height: 300px;
left: 0;
top: 0;
}
.right {
position: absolute;
width: 100px;
height: 300px;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
简单实用，并且主要内容可以优先加载。
源码下载：http://www.jinhusns.com/Products/Download
以上是关于三栏结构布局技巧，顶了的主要内容，如果未能解决你的问题，请参考以下文章
pybind11 - 如果访问了结构的任何成员，则 boost::optional 结构的 std::vector 成员将被清空
在wincc中，我已经定义了结构体变量（有浮点型，整型，字符，文本类），c脚本中取值时需要再重新定