两栏和三栏布局都可以分别用三种方式实现：
-
固定部分使用
absolute定位，固定width，浮动部分的宽度使用calc得出。优点：最佳的兼容性
缺点：脱离文档流，定位写死不易维护
-
使用
display: inline-block;定义栏目，结合固定与calc的width使其在一行中排列。优点：在1的基础上不用脱离文档流
缺点：两个inline-block之间会有
1em的空档，需要设置margin-left: -1em补齐，有hack的味道，影响代码优雅。
-
使用flex容器，将边栏的
flex-grow与flex-shrink都设置为0，中间栏目则设置为1即可。优点：保持文档流，代码简洁易维护
-
缺点（其实没有）：不兼容旧浏览器（几乎不存在，如下图）
flex布局兼容情况
以下是相应示例
代码示例(flex三栏布局) ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trio Layout III</title>
<style>
#container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
}
#left {
flex: 0 0 150px;
background: #ff0000;
}
#main {
flex: 1 1 1px;
background: #00ff00;
}
#right {
flex: 0 0 150px;
background: #0000ff;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</div>
</body>
</html>
效果
拉伸后
拉伸前
