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

I have a container element which must hold 3 divs (or table cells or flexboxes, or whatever). The container is fixed size. Let's say 500px width, 100px height.

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

The middle div must be fixed width, say 100px. It must also be able to be moved around by setting the css. For this example, let's say it is fixed at 225 pixels from the left.

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

The two remaining divs should fill up the remaining space on each side (or take up no space when there's no room, even if the middle div is moved past the boundary of the container). There should be no space between the side divs and the middle div, nor should there be any overlap between the side divs and the middle div.

剩下的两个div应该填充每个边的剩余空间(或者在没有空间的时候不占用空间，即使中间的div被移动到容器的边界)。在侧边div和中间div之间不应该有空格，也不应该在侧边div和中间div之间有任何重叠。

All the innner divs are 100% height (i.e. 100px).

所有的innner div都是100%的高(即100px)。

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

3 个解决方案

#1

Ever heard of CSS Tables and calc??

听说过CSS表格和calc吗?

Note : This Solution is CSS3 compliant, so IE8 and below would not support this answer!! :)

注意:此解决方案与CSS3兼容，因此IE8和以下版本不支持此答案!:)

Working Demo

演示工作

HTML

HTML

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

CSS

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

EDIT

编辑

In case u want center to give feel of moving around on rezise, you'll have to play with adjacent divs width...something like :

如果你想让中心给人一种在rezise上移动的感觉，你必须使用相邻的div宽度…喜欢的东西:

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

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

Working Demo

演示工作

#2

If we use markup like this:

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

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

..we can make use of block formatting contexts with overflow:hidden or overflow:auto to acheive this.

. .我们可以使用带有overflow:hidden或overflow:auto的块格式化上下文。

Hover over the container in the fiddle to see the effect

将鼠标悬停在小提琴的容器上，看看效果如何

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;
}

#3

This is simply possible via Table. Create the table like this

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

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

Apply The CSS Like this :

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

You can find the Demo here : http://jsfiddle.net/s78A6/

您可以在这里找到演示:http://jsfiddle.net/s78A6/