css - 浮動要素の横にある div の幅を空き領域で表現する

Question

このjsfiddle.fourでは、div の幅を全画面幅ではなく、残りの画面スペースのパーセンテージとして表現したいと考えています。しかし、階層内の前の 3 つの div がフローティングされているため、これは現在発生していません。

.four残りの水平画面スペースに関して の幅を定義できるようにするには、どうすればよいですか?

Answer 1

このクラスから幅を削除するだけで.four、残りのスペースが自動的にカバーされます。そして、3つのdivの後に開始するよりも価値margin-leftの合計を与えますthree div'sfourth div

CSS

.four{
background-color:black;
color:white;
margin-left:360px;    
}

デモ

Answer 2

私の知る限り、残りの幅の100％を占める親要素でラップして、その.4パーセントを作成できるようにする必要があります。

親要素に残りのスペースを占有させるには、それはきれいではありませんが、テーブルの表示スタイルに頼ることが最善の策かもしれません。 デモ

マークアップ

<div class="menu-outer-outer">
    <div class="menu-outer">       
        <div class="menu one">first</div>
        <div class="menu two">second</div>
        <div class="menu three">third</div>
        <div class="four-container">
            <div class="four">helloworld</div>
        </div>
    </div>
</div>

スタイル

.menu-outer-outer {
    display: table;
    width: 100%;
}
.menu-outer {
    display: table-row;
}
.menu{
    display: table-cell;
    height:240px;
    width:120px;
}
.one{
    background-color:red;
}
.two{
    background-color:blue;
}
.three{
    background-color:green;
}
.four-container {
    display: table-cell;
    width: auto;
}
.four {
    background-color:black;
    color:white;
    width: 60%;
}

Answer 3

絶対測位は1つの解決策ですが、画面サイズが小さくなると問題が発生する可能性があります。 http://jsfiddle.net/kudoslabs/HMydq/

.four{
background-color:black;
color:white;
position: absolute;
left: 360px ;
right: 0;   
}