CSS布局，中间列为固定宽度AND定位，两个外部列为流体宽度，无间距

Question

我有一个容器元素，它必须包含3个div（或表单元格或flexbox，或其他什么）。容器大小固定。假设宽度为500像素，高度为100像素。

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

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

所有innnerdiv都是100%高度（即100px）。

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

Answer 1

是否听说过CSS Tables和calc？？

注意：此解决方案符合CSS3，因此IE8及以下版本不支持此答案！！：）

工作演示

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 div的width。。。类似于：

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

工作演示

Answer 2

如果我们使用这样的标记：

<div class="container">
    <div class="box1">a</div>
    <div class="wpr">
        <div class="box2">b</div>
        <div class="box3">c</div>
    </div>
</div>

我们可以使用带有overflow：hidden或overflow：auto的块格式化上下文来实现这一点。

将鼠标悬停在小提琴中的容器上以查看的效果

FIDDLE

CSS

.container{
    width:500px;
    height:100px;
}
.wpr {
    overflow:hidden;
    height: 100px;
    background:aqua;
}
.box1, .box2, .box3 {
    height: 100px;
}
.box1 {
    background:pink;
    float:left;
    min-width: 50px;
    -webkit-transition: min-width 1s;
    -moz-transition: min-width 1s;
    -o-transition: min-width 1s;
    transition: min-width 1s;
}
.box2 {
    background:purple;
    width:100px; /*fixed width */
    display:inline-block;
    float:left;
}
.box3 {
    background:orange;
    display:inline-block;
    overflow:hidden;
    width: calc(100% - 100px);  /*100px is same as box with fixed width */
}
.container:hover .box1 {
    min-width: 450px;
}

Answer 3

这可以通过Table实现。创建这样的表格

<table class="container">
    <tr>
        <td class="box1">
        </td>
        <td class="box2">
        </td>
        <td class="box3">
        </td>
    </tr>
</table>

像这样应用CSS：

.container{
    background:#dadada;
    width:500px;
    height:100px;
    border:none;
    border-collapse:collapse;
}
.box1{
    background:red;
    width:100px; /* This will set the position of Middle Box as well as occupy the space in left */
}
.box2{
    background:blue;
    width:350px; /* This will set the width of Middle Box */
}
.box3{
    background:green;
    /*This will automatically occupy the space in the right */
}

您可以在此处找到演示：http://jsfiddle.net/s78A6/