三栏布局

文章目录

1. 1. 圣杯/双飞翼

有点过时了，只是用来兼容IE，后续可以使用flex, grid【参考资料】

• 圣杯
• 双飞翼
• flex: align-item: stretch

圣杯/双飞翼

<style>
.wrap > div { height: 100%; border: 1px solid red; }
.left, .right { width: 100px; }

.wrap { padding: 0 100px; }
.left { float: left; margin-left: -100px; }
.right { float: right; margin-right: -100px; }

.middle {
  /*
    width: 100%;
    box-sizing: border-box;
  */
  /*
    上面的注释代码会导致.middle高度偏矮的
    需要理解使用默认的witdh:auto即可（
      相当于
        width: 100%;
        width-box-sizing: border-box;
    ）
  */
}
</style>


<div class="wrap">
  <div class="left"></div>
  <!-- 注意right是在middle之上的，这样才不会导致right换行 -->
  <div class="right"></div>
  <div class="middle"></div>
</div>