圣杯布局和双飞翼布局简单实现

左右两栏固定高度，中间部分自适应的三栏布局。一个像圣杯/展翅的禽类

圣杯布局

中间内容元素在dom元素次序中优先位置，缺点在于：.main的最小宽度不能小于.left/.right

在页面宽度缩的很小时，中间栏只会达到最小宽度

实现源码：

<div id="container">
	<!-- 自适应元素置于顶部，否则其他元素位置错乱 -->
    <div class="main">main</div>
    
    <div class="left">left</div>
    <div class="right">right</div>
</div>

* {
 	margin: 0;
    padding: 0;
    font-size: 1.6rem;
    box-sizing: border-box;
}
#container {
    min-width: 40rem;  /* 设置最小宽度，即使页面最小，内容的宽度也不可以小于400rem */
    background-color: green;
    height: 20rem;
    /* 为两侧预留位置 */
    padding: 0 20rem;
}
.main {
    width: 100%;
    height: 20rem;
    float: left;
    background-color: blue;
}
.left, .right {
    float: left;
    width: 20rem;
    height: 50rem;
    background-color: red;
}
/* 如果正数的话，left子盒子会向右移，如果是负数的话，则子盒子会在父盒子内部，相对于本行向子盒子的上一行从右向左移动，因为是-100%，所以上一行从右向左的移动距离为父盒子的宽度，即于父盒子的左边线相邻 */
.left {
    margin-left: -100%;
    position: relative;
    left: -20rem;
}
.right {
    margin-left: -20rem;/* 负的自身的宽度 */
    position: relative;
    right: -20rem;
}

双飞翼布局

中间栏宽度可以缩小至0

实现源码：

<div id="container">
      <!-- 自适应元素置于顶部，否则其他元素位置错乱 -->
      <div class="main">
          <div class="main-content">main</div>
      </div>

      <div class="left">left</div>
      <div class="right">right</div>
 </div>

* {
    margin: 0;
    padding: 0;
}
#container {
    min-width: 40rem;
    height: 20rem;
    background-color: green;
}
.main, .left, .right {
    float: left;
}
.left, .right {
    width: 20rem;
    height: 50rem;
    background-color: blue;
}
.main {
    width: 100%;
    height: 30rem;
    background-color: red;
}
.main-content {
    margin: 0 20rem;
}
.left {
    margin-left: -100%;
}
.right {
    margin-left: -20rem;
}