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% ，它起作用了，希望对您有所帮助，看看DEMO

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>