CSS：四个div，第三个占用了剩余的空间 [英] CSS: four divs, third has to take the rest of the space
问题描述
我在互联网上尝试了几个资源（SO），但我根本无法解决这个问题。
网页上只有四个浮动的div
- divs 1，2和4有固定宽度
- div 3必须占用 所有div必须有padding = 0（ Sly滚动库）
这是我在我的页面中尝试做的示意图：
+ -------- --- + - + + --------------------------- + - +
| 1 | 2 | | 3 | 4 |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+ ----------- + - + + --------------------------- + - - +
无论我尝试什么，我都无法让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/
是否有解决方案？
div＃slyScrollbar_parent {
padding：0px;
float：left;
height：500px;
width：16px;
border：1px solid＃333;
border-left：0px none;
/ *添加margin-right到第二个元素，而不是
的margin-left到第三个* /
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/ 其中 我 认为是最好的方法if你想使用所有的浮动和有一个适当的标记。
I tried several resources (SO as well) on the internet but I simply can't solve this one.
There are just four floated divs on a web page.
- divs 1, 2 and 4 have fixed width
- div 3 has to take up the rest of the width
- div 2 and 3 have to have a padding in between
- all divs MUST have padding=0 (requirement for Sly scrolling library)
Here is the schematic diagram of what I'm trying to do in my page:
+-----------+--+ +---------------------------+--+
| 1 |2 | | 3 |4 |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+-----------+--+ +---------------------------+--+
No matter what I try, I can't get div 3 to take up rest of the width, while maintaining padding between div 2 and div 3. This was my last attempt:
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/
Is there a solution to it?
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;
}
This seems to do the trick.
jsFiddle: http://jsfiddle.net/jPdbK/
If you're okay with changing markup, I'd suggest this approach. Put all the divs in a container, let 2 float left and 1 float right. In the background I'd put the 3 column, with margin left and right.
Still not very good looking, but it works without any overflow hacks.
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>
and the 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/
Also a js Version: http://jsfiddle.net/ASnSJ/ which I think is the best approach if you want to use all the floats and have a proper markup.
这篇关于CSS：四个div，第三个占用了剩余的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
