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 {}。{s}} CSS。

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

Answer 2

使用此代码，我已将所有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

Answer 3

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/

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

3 个答案:

HTML：

CSS：