Question

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

我有一个id为right的div（包含块的CSS）。在左侧的内部，我想要一个固定宽度的div（一个分隔条，但它与它的用途无关; id splitpane）;在右侧，填充剩余的空间，另一个div（下面的right-box}。

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

目前我正在使用width: 99.5%作为正确的div，但这是一个可怕的黑客攻击（并且根据屏幕宽度会出现溢出）。看起来有点像这样：

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

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

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

Answer 1

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

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

100％会使rightBox尽可能宽，但在表格的范围内。

Answer 2

为什么你没有在右框中使用 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，它不是语义，就像把分裂器放在“旧”的桌子上

Answer 3

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

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

Answer 4

如果div＃right-box仅包含非浮动内容，则可能只是将内容放在#right中，然后让它环绕浮动的#splitpane。

像素和百分比宽度并排划分

4 个答案: