[html&css] 三栏布局

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

方法1：flex布局

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

方法1：flex布局

  

  

  

/* 方法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布局

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

方法2：grid布局

  

  

  

/* 方法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布局

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

方法3：float布局

  

  

  

/* 方法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布局

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

方法4：absolute布局

  

  

  

/* 方法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的特性，子元素高度会保持一致

方法5：table布局

  

  

  

/* 方法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;
}