像素和百分比宽度div并排 [英] Pixel and percentage width divs side-by-side
问题描述
我发现了很多类似的问题,并尝试了几种解决方案(包括一些所谓的圣杯 CSS布局),但是它们并不能完全满足我的需要。
I've found a lot of similar questions, and tried out several solutions (including some of the so-called "holy grail" CSS layouts), but they don't quite do what I need.
我有一个包含div(一个CSS包含块),其ID为 right
。在它的左侧,我想要一个固定宽度的div(分隔条,但是它的用途并不重要; id splitpane
);在右侧,填充其余的空间,另一个div(下面的id 右框
)。
I have a containing div (a CSS containing block) with id right
. Inside it on the left side, I want a fixed-width div (a splitter bar, but it doesn't matter what it's being used for; id splitpane
); on the right, filling the rest of the space, another div (id right-box
below).
I尝试使两个内部divs 显示:内联块
(使用 vertical-align:top
),将左一个设置为 width:3px
,但是无法将右设置为100%-3px。我也尝试过使用 float:left
/ margin-left:-100%
/ margin-left:3px
技巧,但有相同的问题:100%加3px会使包含父元素的块溢出,并弹出滚动条。 (当然,问题本身不是滚动条;我可以使用 overflow:hidden
删除它,但是右边的内容将被截断。)
I've tried making the two inner divs display: inline-block
(with vertical-align: top
), setting the left one to width: 3px
, but then there's no way to set the right to have width 100% - 3px. I've also tried using the float: left
/margin-left: -100%
/margin-left: 3px
trick, but it has the same problem: the 100% plus the 3px overflows the parent containing block and causes a scroll bar to pop up. (Of course, it's not the scroll bar per se that's the problem; I could use overflow: hidden
to remove it, but then content on the right would be truncated.)
当前,我在正确的div上使用 width:99.5%
,但这是一个可怕的技巧(并且受到溢出取决于屏幕宽度)。看起来有点像这样:
Currently I'm using width: 99.5%
for the right div, but that's a terrible hack (and is subject to overflow depending on screen width). It looks a bit like this:
<div id="right"><div id="splitpane"></div><div id="right-box">
...
</div></div>
使用CSS如下(浮动版本,但内联块版本相似):
With CSS as follows (float version, but the inline-block version is similar):
#right {
display: inline-block;
vertical-align: top;
height: 100%;
width: 85%; /* this is part of a larger div */
}
#right-box {
width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
height: 100%;
}
#splitpane {
float: left;
width: 3px;
height: 100%;
background: white;
border-left: solid gray 1px;
border-right: solid gray 1px;
cursor: e-resize;
}
是否有可能这样做?这是针对内部应用程序的。因此,解决方案仅需要在Firefox 3中运行(但是,如果它们特定于FF3,则最好是因为该解决方案符合标准,而其他浏览器则不是,不是因为它仅使用Firefox)代码)。
Is it even possible to do this? This is for an internal app., so solutions only need to work in Firefox 3 (if they are specific to FF3, though, preferably it's because the solution is standards-compliant but other browsers aren't, not because it's using Firefox-only code).
推荐答案
这是可能的。由于块级元素会自动扩展以占据任何剩余的水平空间,因此可以在具有所需宽度的未清除浮动元素旁边使用块级元素。
This is possible. Because block level elements automatically expand to take up any remaining horizontal space, you can utilise a block level element next to an uncleared floated element with your desired width.
<style type="text/css">
div {
height: 100px;
}
#container {
width: 100%;
}
#left {
background: #FF0;
}
#splitpane {
position: relative;
float: right;
background: #000;
width: 3px;
}
</style>
<div id="container">
<div id="splitpane"></div>
<div id="left"></div>
</div>
请参见 http://jsfiddle.net/georeith/W4YMD/1/
这篇关于像素和百分比宽度div并排的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!