一个固定宽度的 div 和两个变量

Question

我试图让三个 div 并排排列。左边的 div 有一个固定的宽度，中间有一个百分比宽度，第三个应该占据剩余的空间。这是我想出的代码：

HTML：

<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>

CSS：

#left {
    float:left;
    width:200px;
    height:100px;
    background-color:#A00;
    opacity:0.3;
}
#middle {
    float:left;
    width:55%;
    height:100px;
    background-color:#0A0;
    opacity:0.3;
}
#right {
    background-color:#CCC;
    height:40px;
}

我已将左侧的两个 div 设为透明，因此您可以看到右侧 div 的背景一直延伸到页面的左侧。我怎样才能解决这个问题？我试过浮动正确的 div 但它并没有填满其余的空间。 here 是我使用的小提琴。

Answer 1

最简单的解决方案是将 3 个 div 元素包装在一个容器中，如下所示：

<div id="container">
    <div id="left">Left</div>
    <div id="middle">Middle</div>
    <div id="right">Right</div>
</div>

然后只创建子元素display: table-cell 和父元素display: table 和width: 100%。

#left, #middle, #right {
    display: table-cell;
}
#container {
    display: table;
    width: 100%;
}

我命令强制#left 元素保持它的宽度，即使空间很小，我建议也将min-width: 200px 添加到它的 CSS 中。

演示：http://jsfiddle.net/eMbV7/11/

Answer 2

S.B.提供了一个很好的答案，但这里有一种替代方法只是为了好玩。您可以像平常一样拥有display:block; 的所有内容，然后是float:left;，并使用calc() 来获得最后一列的宽度。它只是100% - 55% - 200px，或压缩后的45% - 200px。

这样做的好处是您不需要拥有#container。潜在问题是浏览器支持，主要是移动浏览器。见：http://caniuse.com/calc

HTML：

<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>

CSS：

#container {
    width: 100%;
}
#left {
    float:left;
    width:200px;
    height:100px;
    background-color:#A00;
    opacity:0.3;
}
#middle {
    float:left;
    width:55%;
    height:100px;
    background-color:#0A0;
    opacity:0.3;
}
#right {
    float:left;
    background-color:#CCC;
    height:100px;
    width:calc(45% - 200px);
}

演示：http://jsfiddle.net/eMbV7/9/

Answer 3

使用这段代码，我已将所有 div 包装在一个容器 div 中。

<div class="container">
    <div id="left">Left</div>
    <div id="middle">Middle</div>
    <div id="right">Right</div>
</div>

&css

.container{
    display:block;
    padding:0 0 0 200px;
}

#left {
    float:left;
    width:200px;
    height:100px;
    background-color:#A00;
    opacity:0.3;
    margin:0 0 0 -200px;
}
#middle {
    float:left;
    width:55%;
    height:100px;
    background-color:#0A0;
    opacity:0.3;
}
#right {
    float : right;
    width: 45%;
    background-color:#CCC;
    height:40px;
}

这里是 jsFiddle 链接DEMO