所谓的多列布局、多栏布局其实都是宽度自适应布局, 笔者整理了一些关于多列布局的几种经典方案。

1.两栏自适应

原理：一列固定宽度,一列宽度设置为100%，给固定宽度的一列设置绝对定位，使其脱离文档流,另一列的盒子设置padding值,用内边距来实现右边盒子的宽度自适应。

  1.  <div class="left">
  2.         你好我是慕筱佳 你好我是慕筱佳
  3.         你好我是慕筱佳 你好我是慕筱佳
  4.     </div>
  5.     <div class="right">
  6.         慕筱佳就是我
  7.     </div>


  1.      .left {
  2.             width: 100%;
  3.             height: 300px;
  4.             background-color: blue;
  5.             }
  7.      .right {
  8.             width: 300px;
  9.             height: 300px;
  10.             background-color: aqua;
  11.             position: absolute;
  12.             top: 0;
  13.             right: 0;
  14.             }

2.三列自适应

2.1-圣杯布局

原理：