html - 同じスペース内の可変サイズの要素

Question

幅が可変の 2 つの要素があり、div 内で同じスペースを共有する必要があります。

このリンクで例を作成しました: http://jsfiddle.net/zWVVN/

• #test-1: 次のようになります。
• #test-2: 問題の状況。

Answer 1

こんにちは、hr float left を定義します。その条件は、float に与えるすべての hr の幅を次のように定義する必要があります。

CSS

#teste1, #teste2 {
    width: 300px; }
hr {
    border: 1px solid green;
    background: red;
    height: 25px;
    float: left;
    width:200px;
}
h2 {
    float: right;}

#teste1 hr{
    width: 230px;}

HTML

<div id="teste1">
    <hr>
    <h2>conteudo</h2>
</div>



    <div id="teste2">
        <hr>
        <h2>conteudo</h2>
    </div>
​

ライブデモhttp://jsfiddle.net/rohitazad/3e6bd/2/

Answer 2

両方の div でスペース全体を占有し、テキストを折り曲げたくない場合は、両方の div の幅を 300px に設定する必要があります。両方の div に割り当てられた幅を削除し、両方の HR を左にフロートさせます。

#teste1, #teste2 {
    //this class not needed
}
hr {
    border: 0;
    background: red;
    height: 5px;
    float: left;
}
h2 {
    float: left;
}

デモ: http://jsfiddle.net/3e6bd/3/