2个div，可变大小和固定边距答案

【问题标题】：2 Divs, variable size and fixed margin inbetween2个div，可变大小和固定边距
【发布时间】：2013-06-16 07:42:37
【问题描述】：

我想让两个 div 并排放置。两个 div 的宽度都设置为某个百分比。在两个 div 之间，我想要一个 20px 的固定宽度边距。 div1 和 div2 的宽度以及 20px 的边距加起来应该是可用空间的 100%。（见下方截图）

这是一个入门的基本 jsfiddle：jsfiddle

code for jsfiddle link to work

如果没有 javascript，这可能吗？

【问题讨论】：

这种布局对我来说一直很棘手。一般来说，我会有跨越整个宽度的“列”div（分别为 30% 和 70%，向左浮动），但 padding-right 为 20px。那么最后一列的 padding-right 可能为 0px。此外，您是否考虑过 Twitter Bootstrap、Zurb Foundation 或 Yahoo!Pure 等 CSS 框架？我讨厌一个框架的想法，但是一旦我使用了一个，我就再也不会回去了。 :)
@moberemk 完美解决了这个问题，但也请检查this SO question。

标签： html css

【解决方案1】：

我所知道的最简单、最安全的方法是嵌套<div>，使用外部 div 作为容器进行布局。见这里：http://jsfiddle.net/u7VzB/1/

HTML

<div id="container">
    <div id="div1">div#1</div>
    <div id="div2">
        <div>div#2 inner</div>
    </div>    
</div>

CSS：

#container
{
    color: white;
    margin-top: 50px;
}
#div1
{
    float: left;
    width: 30%;
    background-color: black;
}
#div2
{
    float: left;
    width: 70%;
}
#div2 > div {
    margin-left: 20px;   
    background-color: blue;
}

【讨论】：

非常聪明——我想不出更好的方法。我不确定是否可以仅使用 .div1 和 .div2
@JohnStricler 不是，真的；除非我们能够在 CSS 尺寸定义中使用数学，否则这种计算不可能始终如一地进行。这是 CSS 的限制之一。
@moberemk 可以只使用 css 检查下面的答案。
@Mr_Green 聪明；不知道那样工作。好答案！

【解决方案2】：

你也可以在不干扰 HTML 代码的情况下做这样的事情：

#container {
    color: white;
    margin-top: 50px;
    position: relative;
}
#div1 {
    float: left;
    width: 30%;
    background-color: black;
}
#div2 {
    float: left;
    position:absolute;
    left: 30%;
    margin-left: 20px;
    right: 0px;
    background-color: blue;
}

Working Fiddle

【讨论】：

【解决方案3】：

尝试设置浮动左右并减小宽度

#container
{
    color: white;
    margin-top: 50px;
}
#div1
{
    float: left;
    width: 29%;
    background-color: black;
}
#div2
{
    float: right;
    width: 69%;
    background-color: blue;
}

【讨论】：

这将在两者之间留下 2%。我希望两者之间的边距始终精确为 20 像素 - 而不是 2%
就像 Marius 所说的，这并不是在所有情况下都有效； 2% 的人说 1300px 的 div 不起作用。有关可扩展答案的示例，请参阅我的解决方案。