1.为了优先显示中间部分，都是先写中间部分main，再写左右 left,right
2.双飞翼布局中间多了一个标签包裹，缺点：dom结构冗余
3.圣杯模式：当中间区域宽度<左侧宽度 时，布局会发生混乱
个人比较喜欢圣杯模式 和min-width混合使用，这样可避免布局混乱。
双飞翼布局如下：
<style>
.left,
.right,
.main {
min-height: 200px;
}
.left {
width: 200px;
background-color: thistle;
}
.main {
background: #999;
}
.right {
width: 300px;
background-color: violet;
}
/* 双飞翼布局重点 */
.left,
.main,
.right {
float: left;
}
.main {
width: 100%;
}
.main-inner {
margin-left: 200px;
margin-right: 300px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -300px;
}
</style>
<body>
<div class="main"><div class="main-inner">中心区</div></div>
<div class="left">left</div>
<div class="right">right</div>
</body>圣杯布局如下：
<style type="text/css">
/*基本样式*/
.left, .right, .main {
min-height: 300px;
}
.left {
width: 200px;
background-color:thistle;
}
.main {
background-color: #999;
}
.right {
width: 300px;
background-color: violet;
}
/* 圣杯布局关键代码 */
.left, .main, .right {
float: left;
position: relative;
}
.main {
width: 100%;
}
.container {
padding-left: 200px;
padding-right: 300px;
}
.left {
margin-left: -100%;
left: -200px;
}
.right {
margin-left: -300px;
right: -300px;
}
</style>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>