3

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

网页上只有四个浮动 div。

  • div 1、2 和 4 具有固定宽度
  • div 3 必须占据其余的宽度
  • div 2 和 3 之间必须有一个填充
  • 所有 div 必须有 padding=0（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;
}

小提琴

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

有解决办法吗？

4

5 回答 5

4 
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/如果你想使用所有的浮点数并有一个适当的标记，我认为这是最好的方法。

于 2013-07-26T08:47:11.367 回答
4

由于容器的宽度和高度是固定的，因此您可以使用绝对定位来完成此操作。这是小提琴。只需确保元素的父级已position: relative设置，以便容器相对于它定位。

这是HTML：

<div id="first">
    1
</div>
<div id="second">
    2
</div>
<div id="third">
    3
</div>
<div id="fourth">
    4
</div>

和CSS：

#first, #second, #third, #fourth {
    position: absolute;
    top: 0;
    bottom: 0;
}

#first {
    background-color: rgba(255, 0, 0, 0.25);
    width: 50px;
}

div#second {
    background-color: rgba(0, 255, 0, 0.25);
    width: 50px;
    left: 50px;
}

#third {
    background-color: rgba(0, 0, 255, 0.25);
    left: 125px;
    right: 50px;
}

div#fourth {
    background-color: rgba(255, 0, 255, 0.25);
    width: 50px;
    right: 0;
}
于 2013-07-26T08:51:56.193 回答
3

完毕！

而不是给自动宽度容器留下边距。

为第二个 div 提供边距权限。

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

希望能解决它。

于 2013-07-26T08:49:21.120 回答
2

嗨，您的解决方案落后了，css calc 您可以像这样应用它：

#slyFrame_child {
 padding: 0px;
float: right;
overflow: hidden;
height: 500px;
width: -webkit-calc(100% - 128px);
width: -moz-calc(100% - 128px);
width: calc(100% - 128px);
border: 1px solid #333;
}

演示http://jsfiddle.net/jw73j/4/

希望这有帮助

于 2013-07-26T09:00:34.667 回答
1

CSS

#slyFrame_child {
padding: 0px;
overflow: hidden;
height: 500px;
width: calc( 100% - 148px);
margin-left: 50px;
border: 1px solid #333;
float: left;
}

HTML

<div id="slyFrame_parent">
    P
</div>
<div id="slyScrollbar_parent">
    S
</div>
<div id="slyFrame_child">
    P
</div>
<div id="slyScrollbar_child">
    S
</div>
于 2013-07-26T09:06:41.340 回答