2个分区，可变大小和中间的固定边距

Question

我想让两个div坐在一起。两个div的宽度都设置为一定的百分比。在两个div之间我想要一个20px的固定宽度边距。 div1和div2的宽度以及20px边距应该相当于可用空间的100％。 （见下面的截图）

这是一个基本的jsfiddle开始：jsfiddle

code for jsfiddle link to work

这可能没有javascript吗？

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

Answer 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

Answer 3

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

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