CSSフロートポジションの問題

Question

私はフロートに関する多くの質問があることを知っていますが、私はこの問題を克服する方法にちょっと固執しているようです。

はここに私の例を参照してください：http://jsfiddle.net/eE9WT/1/

私がやろうとして（またはInfactは、避けようとして）二.FLOAT div要素が起動した後第三.FLOATのdiv要素が開始されていますどのような。

ページのすべてのスペースを利用して、3番目のdivを最初のdivの直下に配置することをお勧めします。私はこれを2つの列に分けることができることを知っていますが、それをすることなくより良い解決策があるかどうかは疑問でした。

信じられないかもしれませんが、これは私がこの問題に直面したのは初めてのようです。みんな

Answer 1

この記事は、浮動ボックスのレイアウトを作成するのに役立つだろう

ありがとう：http://matthewjamestaylor.com/blog/floating-boxes-css-layout.htm

また、彼らはあなたのデザインのためのより良いフィット思えるだけの場合には、彼の他のレイアウトをチェックしてください！

Answer 2

あなたは右

.float + .float { 
    float: right; 
} 

Answer 3

する第2フロートのためのルールを追加することができ、私は、これはあなたが探している解決策だと思う：

JSFiddle

私はすべてのdivの移動しました左にfloatとします。 画面の右側に、容器にpadding-rightという空白を入れました。 そして、position: relative;を使用して、2番目の列をそのスペースに移動しました。

Answer 4

Display:inline-block; 
zoom:-1; 

浮動小数点以上は何かをします。フロートを使用しているまれなケースがいくつかあります。私はあなたの目標を満たしていないことを知っている、私はただ私の側面を探検する。