css常见布局-三栏布局-左右定宽，中间自适应

左右定宽，中间自适应

以下各种解决方案都存在，最小宽度的限制

codePen codepen.io/zjhcn/full/…

初始化css

.container {
  min-width: 800px;
  background-color: #ff0;
}

.left, .right {
  width: 100px;
  background-color: #f00;
}

table

html

<table class="container table">
  <td class="left">left</td>
  <td class="center">
    这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
  </td>
  <td class="right">right</td>
</table>

css

/* 无 */

float

html

<div class="container float clearfix">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center">
    这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
  </div>
</div>

css

/* float 通用解决方案 */
.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}.clearfix{*zoom:1}

.float {
  height: 200px;
}
.float .left {
  float: left;
  height: 100%;
}
.float .right {
  float: right;
  height: 100%;
}

positon

html

<div class="container position">
  <div class="left">left</div>
  <div class="center">
    这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
  </div>
  <div class="right">right</div>
</div>

css

/* position 布局  */
.position {
  position: relative;
}
.position .left, .position .right {
  position: absolute;
  top: 0;
  height: 100%;
}
.position .left {
  left: 0;
}
.position .right {
  right: 0;
}
.position .center {
  padding-left: 100px;
  padding-right: 100px;
}

flex

html

<div class="container flex">
  <div class="left">left</div>
  <div class="center">
    这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
  </div>
  <div class="right">right</div>
</div>

css

/* flex 布局  */
.flex {
  display: flex;
  justify-content: sapce-between;
}
.flex .left {
  flex: 0 0 100px;
}
.flex .right {
  flex: 0 0 100px;
}

grid

html

<div class="container grid">
  <div class="left">left</div>
  <div class="center">
    这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，这是一段内容，
  </div>
  <div class="right">right</div>
</div>

css

/* grid 布局  */
.grid {
  display: grid;
  grid-template-columns: 100px 1fr 100px
}