我在互联网上尝试了几个资源（SO也是），但我根本无法解决这个问题。
一个网页上只有四个浮动的div。
- div1、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/
有解决办法吗？
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/I认为，如果您想使用所有浮动并具有适当的标记，这是最好的方法。
由于容器的宽度和高度是固定的，因此可以使用绝对定位来实现这一点。这是小提琴。只要确保元素的父元素设置了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;
}
完成！
而不是给自动宽度容器留出空白。
向第二部分提供保证金权利
div#slyScrollbar_parent
{
padding: 0px;float: left;
height: 100px;
width: 16px;
border: 1px solid #333;
border-left: 0px none;
margin-right: 20px;
}
希望能解决这个问题。
hi您的解决方案落后于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/
希望这能帮助
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>