3列布局，带有响应中心列

Question

我正在尝试构建一个响应式三列布局。但是，我想要在我的外部列上固定宽度，我希望中心列占用所有剩余空间。

因此，如果屏幕宽度为900px，外部列分别为200px和300px，则中心列将占用剩余的400px。

到目前为止我已经

了

.column-left,
.column-main,
.column-right {
    display: inline-block;
    vertical-align: top;    
    height: 100%;
}
.column-left {
    width: 200px;
}
.column-main {
    width: 100%;
}
.column-right {
    width: 300px;
    float: right;
}

但是这会将中间列向下推到下一行，第三列也会向下推到另一行。

Answer 1

已添加 float:right代码，已删除 width:100%代码，它有效，希望有所帮助，请查看{{3} }

Answer 2

选项1：表格布局

为什么不使用CSS表格布局？ NB。这在布局中是有效的，而不是用于数据内容的语义table元素。

html,
body,
.table {
  height: 100%;
  width: 100%;
  margin: 0;
}
.table {
  display: table;
  table-layout: fixed;
}
.cell {
  display: table-cell;
  background:lightgrey;
}
.cell:first-child,
.cell:last-child {
  width: 200px;
  background: grey;
}

<div class="table">
  <div class="cell"></div>

  <div class="cell"></div>

  <div class="cell"></div>

</div>

选项2：定位布局

或者，您可以定位元素......

html,
body,
div {
  height: 100%;
  width: 100%;
  margin: 0;
}
div {
  position: absolute;
  top: 0;
  left: 200px;
  bottom: 0;
  right: 200px;
  width: calc(100% - 400px);
  background:lightgrey;
}
div:first-of-type,
div:last-of-type {
  background: grey;
  width: 200px;
  position: absolute;
}
div:first-of-type {
  left: 0;
  right: auto;
}
div:last-of-type {
  left: auto;
  right: 0;
}

<div></div>
<div></div>
<div></div>