并排的像素和百分比宽度 div

发布于 2024-07-15 04:30:12 字数 1422 浏览 4 评论 0原文

我发现了很多类似的问题，并尝试了几种解决方案（包括一些所谓的“圣杯”CSS 布局），但它们并不能完全满足我的需要。

我有一个包含 div（一个包含 CSS 的块），其 id 为 right。在它的左侧，我想要一个固定宽度的 div（一个分割栏，但它的用途并不重要；id splitpane）；在右侧，填充其余空间，另一个 div（id right-box 下面）。

我尝试制作两个内部 div display: inline-block （使用 vertical-align: top），将左侧的设置为 width: 3px code>，但是无法将宽度设置为 100% - 3px。我也尝试过使用 float: left/margin-left: -100%/margin-left: 3px 技巧，但它有同样的问题：100%加上3px溢出父包含块并导致滚动条弹出。（当然，问题不是滚动条本身；我可以使用 overflow:hidden 来删除它，但右侧的内容会被截断。）

目前我正在使用 width: 99.5% 对于右侧的 div，但这是一个可怕的 hack（并且根据屏幕宽度可能会溢出）。它看起来有点像这样：

<div id="right"><div id="splitpane"></div><div id="right-box">
  ...
</div></div>

使用 CSS 如下（浮动版本，但内联块版本类似）：

#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）代码）。

原文

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.

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'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.)

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>

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;
}

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).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甚是思念 2024-07-22 04:30:12

DIV 是错误的元素类型，因为它们不会相互“对话”。您可以使用表格轻松实现此目的：

<table style="width:200px">
<tr>
    <td id="splitpane" style="width: 3px">...</td>
    <td id="rightBox" style="width: 100%">...</td>
<tr>
</table>

100% 将使 rightBox 尽可能宽，但在表格的限制内。

DIVs are the wrong element type for this since they don't "talk" to each other. You can achieve this easily with a table:

<table style="width:200px">
<tr>
    <td id="splitpane" style="width: 3px">...</td>
    <td id="rightBox" style="width: 100%">...</td>
<tr>
</table>

The 100% will make the rightBox as wide as possible but within the limits of the table.

回复收藏 0 原文

再见回来 2024-07-22 04:30:12

这个有可能。由于块级元素会自动扩展以占用任何剩余的水平空间，因此您可以在具有所需宽度的未清除浮动元素旁边使用块级元素。

<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/

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>

See http://jsfiddle.net/georeith/W4YMD/1/

回复收藏 0 原文

小女人ら 2024-07-22 04:30:12

为什么你不在右框中使用 margin-left （因为它是浮动布局）？

所以不需要创建一个分割器 div...


#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}

是的，类似的东西，我讨厌空 div，它不是语义的，就像在“旧”表上放置一个分割器

why you didn't use margin-left (since it was float layout) on right box?

so no need to create a splitter div...


#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}

yeah something like that, i hate empty div, it's not semantic and it's like putting a splitter on the "old" table way

回复收藏 0 原文