CSS布局,中间列是固定宽度和定位,两个外柱流体宽度,没有间距

Question

我有一个容器元素,必须容纳3个div(或表格单元格或flexbox,或其他).容器是固定尺寸的.让我们说500px宽度,100px高度.

中间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 */
}

编辑

如果你想让中心感觉到在rezise上四处走动,你将不得不玩adjacent divs width...类似于:

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

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

Working Demo