CSS：四个 div，第三个必须占据其余空间

我在互联网上尝试了几种资源（也如此），但我根本无法解决这个问题。

网页上只有四个浮动 div。

• div 1、2 和 4 具有固定宽度
• div 3 必须占据剩余的宽度
• div 2 和 3 之间必须有填充
• 所有 div 必须具有 padding=0 （要求狡猾的滚动库 http://darsa.in/sly/)

这是我在页面中尝试执行的操作的示意图：

 +-----------+--+   +---------------------------+--+
 | 1         |2 |   | 3                         |4 |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 |           |  |   |                           |  |
 +-----------+--+   +---------------------------+--+

无论我如何尝试，我都无法让 div 3 占据其余的宽度，同时保持 div 2 和 div 3 之间的填充。这是我的最后一次尝试：

HTML

<div id="slyFrame_parent">
    P
</div>
<div id="slyScrollbar_parent">
    S
</div>
<div id="slyScrollbar_child">
    S
</div>
<div id="slyFrame_child">
    P
</div>

CSS

#slyFrame_parent {
    padding: 0px;
    float: left;
    height: 500px;
    width: 60px;
    border: 1px solid #333;
}

div#slyScrollbar_parent {
    padding: 0px;
    float: left;
    height: 500px;
    width: 16px;
    border: 1px solid #333;
    border-left: 0px none;
}

#slyFrame_child {
    padding: 0px;
    overflow: hidden;
    height: 500px;
    width: auto;
    margin-left: 5px;
    border: 1px solid #333;
}

div#slyScrollbar_child {
    padding: 0px;
    float: right;
    height: 500px;
    width: 16px;
    border: 1px solid #333;
    border-left: 0px none;
}

FIDDLE

http://jsfiddle.net/ozrentk/jw73j/ http://jsfiddle.net/ozrentk/jw73j/

有解决办法吗？

div#slyScrollbar_parent {
    padding: 0px;
    float: left;
    height: 500px;
    width: 16px;
    border: 1px solid #333;
    border-left: 0px none;
    /* Add margin-right to the second element instead 
       of margin-left to the third */
    margin-right: 10px;
}

这似乎可以解决问题。

js小提琴：http://jsfiddle.net/jPdbK/ http://jsfiddle.net/jPdbK/

如果您同意更改标记，我建议您采用这种方法。 将所有div放入一个容器中，让2个向左浮动，1个向右浮动。在后台，我将放置 3 列，左右留有边距。

看起来仍然不是很好，但是它可以在没有任何溢出黑客的情况下工作。

The HTML

<section>
    <div class='container'>
        <div id="a">1</div><!--
        --><div id="b">2</div><!--
        --><div id="d">4</div>
    </div>
    <div id="c">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam era.</div>
</section>

和CSS

* {
    margin:0;
    padding:0;
}
section {
    width: 100%;
}
.container {
    position: absolute;
    width: 100%;
}
#a {
    padding: 0px;
    display: inline-block;
    height: 500px;
    width: 60px;
    background-color: #bbb;
}
#b {
    padding: 0px;
    display: inline-block;
    height: 500px;
    width: 16px;
    background-color: #ccc;
    border-left: 0px none;
}
#c {
    padding: 0px;
    display: inline-block;
    height: 500px;
    width: auto;
    background-color: #ddd;
    margin: 0px 16px 0px 76px;
}
#d {
    padding: 0px;
    float: right;
    height: 500px;
    width: 16px;
    background-color: #eee;
}

js小提琴：http://jsfiddle.net/PTAK5/ http://jsfiddle.net/PTAk5/

还有一个js版本：http://jsfiddle.net/ASnSJ/ http://jsfiddle.net/ASnSJ/ which I如果您想使用所有浮动并具有适当的标记，则 think 是最好的方法。