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

Question

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

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

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

所有内部 div 的高度均为 100%（即 100 像素）。

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

编辑

如果你想让 center 让 感觉 在 rezise 上四处移动，你必须使用 adjacent divs width...类似的东西：

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

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

Working Demo

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>

..我们可以使用带有溢出：隐藏或溢出：自动的块格式化上下文来实现这一点。

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

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/