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