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>