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 div s 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>

..我们可以使用带溢出的块格式化上下文：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 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/

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

3 个答案:

CSS