html - 2 Div、可変サイズ、固定マージン

Question

2 つの div を隣り合わせに配置したいと思います。両方の div の幅が特定のパーセンテージに設定されています。2 つの div の間に、20px の固定幅マージンが必要です。div1 と div2 の幅と 20px の余白を合計すると、使用可能なスペースの 100% になるはずです。(下のスクリーンショットを参照)

開始するための基本的な 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

フロートを左右に設定してみて、幅を減らしてください

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