html - 2个div，可变大小和固定边距

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

工作小提琴

Answer 3

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

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