html - CSS:四个div，第三个必须占用剩余空间

Question

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

网页上只有四个 float 的 div。

• div 1、2 和 4 具有固定宽度
• div 3 必须占据剩余的宽度
• div 2 和 3 之间必须有一个填充
• 所有 div 必须有 padding=0(Sly scrolling library 的要求)

这是我在我的页面中尝试做的事情的示意图:

 +-----------+--+   +---------------------------+--+
 | 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/

有解决办法吗？

Answer 1

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;
}

这似乎可以解决问题。

jsFiddle:http://jsfiddle.net/jPdbK/

---

如果您不介意更改标记，我建议您采用这种方法。 将所有的div放在一个容器中，让2个左浮1个右浮。在背景中，我将放置第 3 列，左右留有边距。

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

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;
}

jsFiddle:http://jsfiddle.net/PTAk5/

还有一个js版本:http://jsfiddle.net/ASnSJ/ 我认为这是最好的方法，如果您想使用所有 float 并有适当的标记。