并排显示的div

Question

如何在两个div之间放置分隔符并使它们并排显示？

就像这样：

我假设html布局可能看起来像这样：

<div id="container">
    <div id="left"></div>
    <div id="splitter"></div>
    <div id="right"></div>
</div>

或者

<div id="container">
    <div id="left">
        <div id="splitter"></div>
    </div>
    <div id="right"></div>
</div>

- sam

---

你可以通过几乎无限的方式来实现这个。你到目前为止尝试了什么？你是否在谷歌上搜索过类似的解决方案并使用了 Stack Overflow 上的搜索功能？ - oezi

此外，您应该提供更多信息。这些div是否应该具有相同的高度？它们应该随内容增长还是使用最大可能的高度？这些部分是否应该具有特定的宽度或在调整浏览器大小时增长？ - oezi

任何可行的方法都可以满足我的需求。1）div应该具有相同的固定高度；2）左右窗格应在可用空间内拉伸。 - sam

+1 对于这张图片。但是分隔符应该由什么组成呢？如果它没有任何实际内容，你应该尽量避免使用 HTML，并改用纯 CSS。 - DanMan

Answer 1

html:

<div id="container">
    <div id="left"></div>
    <div id="splitter"></div>
    <div id="right"></div>
</div>

CSS：

#container{
 width:990px; //or 100%
}
#left{
 width:300px; //or 30%
 float:left;
}
#splitter{
 width:90px; //or 5%
 float:left;
}
#right{
 600px; //or 65%
 float:left;
}

- red-X

---

无法正常工作：右侧窗格始终位于下一行（至少在IE8和Chrome 7中）。 - sam

它们有任何填充或边距吗？如果有，请将它们删除或从宽度中减去。 - red-X

没有任何填充或边距，左右窗格和分隔条的总宽度等于容器宽度。我通过为窗格添加绝对位置和为分隔条添加相对位置来解决了这个问题。这对我很有效。谢谢！ - sam

Answer 2

将"float：left"放在＃left和＃splitter上，但正如oezi所说，有很多方法可以做到这一点。

- benhowdle89

---

与这里的问题相同：https://dev59.com/TlLTa4cB1Zd3GeqPYDLQ#4285526。但右侧面板在下一行中右对齐。 - sam

Answer 3

两种方法都可行，但我会选择第二种，因为您可以使用float:left将左侧div向左浮动，使用float:right将右侧div向右浮动，并且由于分隔器位于左侧div中，因此它会到达正确的位置。

- Pascal H.

---

如果是这样，则右侧窗格的内容将沿左侧窗格的右侧对齐（在分隔符的左侧）。 - sam