html - 残り幅の使い方は？

Question

div2 を div1 の右側に水平に配置したいと思います。Div2 は、可変数 (ブラウザーの幅) である残りの幅も伸ばす必要があります。div2 の幅を絶対値 (300px) に設定すると、正しい配置が得られますが、残りの幅を消費できなくなります。

これはどのように行うべきですか？

<div id="1" style="float:left;width:100px">
    the first box
</div>
<div id="2" style="float:left;width:100%">
    the second box
</div>

Answer 1

左のものをフロートにするだけで、2番目のものは幅を調整します:

<div id="1" style="float:left;">
    the first box
</div>
<div id="2">
    the second box
</div>

Answer 2

div2 を div の下にラップしたくない場合は、コンテンツの量は関係ありません。

http://jsfiddle.net/h424c/2/

div {
    display: table-cell;
}

HTML

<div id="a1" style="width:100px">
    the first box
</div>
<div id="a2">
    the second box sfsdf dsf sdfasdf sadf sadf sadf asdf sadf sdaf sadf sdfsadf sdaf asdf sdf sdf sdaf asdf sadf sdaf sdaf sdf sdaf sadf sdf sdf sdaf sdf sadf dsaf sdf sdaf ds
</div>

Answer 3

2 つの div を 1 つの親 div と 1 つの子 div として使用することで、これを行うことができます。クロスブラウザーでテストする必要があります.IEで動作するかどうかはわかりません;-) ...「クリア」も素晴らしいでしょう:-)

<div style="width: 100%; border: 1px solid blue;  ">

    <div id="1" style="float:left;width:100px; border: 1px solid red; ">
        the first box
    </div>
        the second box
</div>

例: http://jsfiddle.net/5t6Ak/

注: ID は数字で始めないでください。