html - CSS 布局，中间列固定宽度并定位，两个外部列流动宽度，无间距

Question

我有一个容器元素，它必须容纳 3 个 div(或表格单元格或 flexbox ，或其他)。容器是固定大小的。假设宽度为 500 像素，高度为 100 像素。

中间的 div 必须是固定宽度，比如 100px。它还必须能够通过设置 css 来移动。对于此示例，假设它固定在距左侧 225 像素处。

剩下的两个 div 应该填满每一边的剩余空间(或者在没有空间时不占用空间，即使中间的 div 移过容器的边界也是如此)。侧面 div 和中间 div 之间不应有空格，侧面 div 和中间 div 之间不应有任何重叠。

所有内部 div 都是 100% 高度(即 100px)。

container 500x100
----------------------------------------------------------------------------|
| |-------------------------------| |---------------------| |-------------| |  
| |  left, fluid                  | | middle, positioned  | | right,fluid | |
| |                               | |at 225px, 100px width| |             | | 
| |-------------------------------| |---------------------| |-------------| | 
----------------------------------------------------------------------------|

Answer 1

听说过 CSS Tables和 calc ??

注意:此解决方案符合 CSS3，因此 IE8 及以下版本不支持此答案! :)

Working Demo

HTML

<div class="container">
    <div class="left">left</div>
    <div class="cent">cent</div>
    <div class="right">right</div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div { /* just for demo */
    height:300px;
    border:1px solid red
}
.container {
    display:table;
    width:100%;
    height:100%;
    table-layout:fixed;
}
.left, .right, .cent {
    display:table-cell /*aabara-kaa-dabara*/
}
.cent {
    width:225px; /* fixed center */
}
.left, .right {
    width : calc(50% - 225px) /* make left and right divs fluid */
}

编辑

如果您希望中心在调整时给人感觉移动，您将不得不使用adjacent div的width。 ..类似的东西:

.left {
    width : calc(30% - 225px);
}

.right{
    width : calc(70% - 225px);
}

Working Demo