[html&css] 三栏布局

题目：假设高度200px，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

方法1：flex布局

优点：方便快捷
缺点：ie8及以下浏览器不兼容。兼容性详见

<h6>方法1：flex布局</h6>
<div class="box1">
  <div class="box1__lt"></div>
  <div class="box1__md"></div>
  <div class="box1__rt"></div>
</div>

/* 方法1：flex布局 */
.box1 {
  height: 200px;
  display: flex;
}
.box1__lt {
  width: 300px;
  background-color: red;
}
.box1__md {
  flex: 1;
  background-color: green;
}
.box1__rt {
  width: 300px;
  background-color: blue;
}

方法2：grid布局

优点：方便快捷
缺点：兼容性不是很好。兼容性详见

<h6>方法2：grid布局</h6>
<div class="box2">
  <div class="box2__lt"></div>
  <div class="box2__md"></div>
  <div class="box2__rt"></div>
</div>

/* 方法2：grid布局 */
.box2 {
  display: grid;
  grid-template-columns: 300px auto 300px;
  grid-template-rows: 200px;
}
.box2__lt {
  background-color: red;
}
.box2__md {
  background-color: green;
}
.box2__rt {
  background-color: blue;
}

方法3：float布局

优点：完美的兼容性
缺点：脱离文档流；需要额外的清除浮动动作

<h6>方法3：float布局</h6>
<div class="box3">
  <div class="box3__lt"></div>
  <div class="box3__rt"></div>
  <div class="box3__md"></div>
</div>

/* 方法3：float布局 */
.box3 {
  height: 200px;
  overflow: hidden;
}
.box3__lt {
  width: 300px;
  height: 100%;
  float: left;
  background-color: red;
}
.box3__md {
  height: 100%;
  margin: 0 300px;
  background-color: green;
}
.box3__rt {
  width: 300px;
  height: 100%;
  float: right;
  background-color: blue;
}

方法4：absolute布局

优点：兼容性完美
缺点：脱离文档流

<h6>方法4：absolute布局</h6>
<div class="box4">
  <div class="box4__lt"></div>
  <div class="box4__md"></div>
  <div class="box4__rt"></div>
</div>

/* 方法4：absolute布局 */
.box4 {
  height: 200px;
  position: relative;
}
.box4__lt {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background-color: red;
}
.box4__md {
  position: absolute;
  top: 0;
  left: 300px;
  right: 300px;
  height: 100%;
  background-color: green;
}
.box4__rt {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background-color: blue;
}

方法5：table布局

优点：兼容性完美
缺点：因为table-cell的特性，子元素高度会保持一致

<h6>方法5：table布局</h6>
<div class="box5">
  <div class="box5__lt"></div>
  <div class="box5__md"></div>
  <div class="box5__rt"></div>
</div>

/* 方法5：table布局 */
.box5 {
  width: 100%;
  height: 200px;
  display: table;
}

.box5__lt {
  display: table-cell;
  width: 300px;
  background-color: red;
}
.box5__md {
  display: table-cell;
  background-color: green;
}
.box5__rt {
  display: table-cell;
  width: 300px;
  background-color: blue;
}