具有响应式中央列的 3 列布局

Question

我正在尝试构建响应式三列布局。但是，我希望外列的宽度固定，并且我希望中央列占据所有剩余的 space.

因此，如果屏幕宽度为 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%，有效，希望对您有所帮助，看看 DEMO

Answer 2

选项 1：Table 布局

为什么不使用 CSS table 布局？注意。这在这里作为布局是有效的，而不是用于数据内容的语义 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>

具有响应式中央列的 3 列布局

3 column layout with responsive central column

html

css

responsive-design

选项 1：Table 布局

选项 2：定位布局