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

Question

我正在尝试让三个div并排放置。左侧的div具有固定宽度，中间的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，但它并没有填满剩余的空间。这里是我使用的 fiddle 链接：here。

- McAngus

---

http://css-tricks.com/snippets/css/a-guide-to-flexbox/ - enapupe

可能是固定宽度中间div和两个弹性宽度div在其两侧的重复问题。 - Paulie_D

@enapupe 我试过了。它似乎也改变了固定div的大小：http://jsfiddle.net/eMbV7/10/ - McAngus

McAngus，这三个答案似乎都可以解决你的问题。如果你最终使用了其中一个，我建议将其标记为被接受的答案，以帮助未来查看此问题的人找到它。 - Kelderic

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 元素的宽度，我建议在其 CSS 中添加 "min-width: 200px"。

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

- S.B.

---

这会改变那个被固定的单元格的宽度。 - McAngus

只有当宽度小于某个特定值时才需要这样做。在这种情况下，将 #left 的 min-width: 200px 添加进去即可。:) 就像这样：http://jsfiddle.net/eMbV7/11/ - S.B.

更新了答案以反映该变化。 - S.B.

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

（保留HTML）

- demonofthemist

---

这并不能解决他的问题，即第三个 div 跨越中间 div 的情况... - S.B.

看起来它的工作方式很棒，但我不完全明白为什么它能够工作。为什么padding不会把#left挤出去？ - Kelderic

因为父容器有左内边距，而#left具有相同数量的负margin-left。 - demonofthemist

太聪明了！+1 给你。 - Kelderic

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/

- Kelderic

---

我对CSS还比较新，这是一个好的做法吗？我这么问只是因为我以前从来没有见过calc。 - McAngus

这是一个好的实践，因为它是在CSS3规范中官方支持的...但浏览器支持可能会有些棘手：http://caniuse.com/calc - Kelderic