jquery - 残りの幅を div で埋める、サイズを設定しない

Question

これらの質問をいくつか見ましたが、特に私の状​​況でうまくいくと思われるものはありませんでした。ナビゲーションに追加されたタブの量に基づいてサイズを調整できるタブ付きナビゲーションがあります。次に、残りの領域を埋めたい電話番号領域を含む 2 番目の領域を作成し、右から左にスペースを埋めます。

どちらのオブジェクトの幅もわかりません。私がこれに持っていた最も近い解決策は、ナビゲーションを左にフロートさせることでした。これにより、ナビゲーションの後ろに青い領域が広がりました。テーブルを試しましたが、機能させることができませんでした。青い領域に幅だけを与えてから、中央のスペースを埋めずに残りをナビゲーションに与えるか、別の構成では、含まれているテーブルのサイズを2つの要素を組み合わせた幅に折りたたんで埋めません。フル幅 960px。

理想的には、CSS ソリューションを見つけたいと思っていますが、JS や jQuery も嫌いではありません。

Answer 1

ナビゲーション タブがフローティングされていると仮定するとoverflow: hidden;、ダーク ブルーdiv(残りの幅を取りたいもの) に追加するだけで十分です。

リトル デモ:リトル リンク.

Answer 2

ここでjsfiddleの作業コード

<div class="base">
    <div class="menu">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
    <div class="extra">
        Hello is nothing but Hello
    </div>
    <br clear="all"/>
</div>

CSS：

.base{
   width:100%;
   background:#c00;
   color:#fff;
   padding-top:15px;    
}
.menu{
    float:left;
}
.menu ul li{
    float:left;
    margin-left:5px;
    margin-right:5px;
    background:#000;
    padding:3px;
    border-radius:8px 8px 0px 0px;

}
.extra{
   float:right;
}

Answer 3

width: 100%トリックをするべきではありませんか？