像素和百分比宽度 div 并排答案

【问题标题】：Pixel and percentage width divs side-by-side像素和百分比宽度 div 并排
【发布时间】：2013-03-17 07:26:46
【问题描述】：

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

我有一个 id 为 right 的包含 div（一个包含 CSS 的块）。在它的左侧，我想要一个固定宽度的 div（一个分隔条，但它的用途并不重要；id splitpane）；在右侧，填充其余空间，另一个 div（id 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，但这是一个可怕的 hack（并且根据屏幕宽度可能会溢出）。有点像这样：

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

用CSS如下（浮动版，但inline-block版类似）：

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

【问题讨论】：

标签： css width

【解决方案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 尽可能宽，但在表格的范围内。

【讨论】：

这个解决方案似乎要求我为包含元素指定一个绝对宽度（在上面的例子中是width:200px）；我不想那样做。另外，我不想使用表格。
如果你不喜欢默认的 100%，你只需要指定一个宽度。即使使用 CSS，表格也可以使用。 DIV 应该用于彼此在下方的内容，而不是在同一行中彼此相邻的内容。
你听说过 CSS 浮动吗？
@rochal：你听说过浮动引起的所有问题吗？就像在 N > 2 处创建具有完全相同高度的 N 个元素？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

为什么你没有在右框上使用 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，它不是语义的，就像在“旧”表方式上放置一个分隔符

【讨论】：

Divs 一开始就不是语义化的。你应该使用div来标记没有意义的东西，这就是为什么它被称为“div”（任意划分）。
是的，我知道 div 不是语义的，我的意思是“空元素”不是语义
我不想为除分割器之外的任何东西指定绝对宽度。

【解决方案4】：

如果 div #right-box 仅包含非浮动内容，则将内容放在 #right 中并让它环绕浮动 #splitpane 可能是一个想法。

【讨论】：