更新时间:2023-02-06 19:07:18
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.
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.