css - すべてを確認する方法s with float:right; 実際に浮きますよね？

Question

Facebook タイムラインに似た 2 列の出力を作成するために、さまざまな高さの内部 div を多数含む div があります。次のようなものです。

<div style="width:600px">
<div class="boxsample" style="float:right;width=50%;">Content-right-1</div>
<div class="boxsample" style="float:left;width=50%;">Content-left-1</div>
<div class="boxsample" style="float:left;width=50%;">Content-left-2</div>
<div class="boxsample" style="float:right;width=50%;">Content-right-3</div>
</div>

問題は、最後の左の div が最後の右の div よりも高いときはいつでも、次の div が次のように常に最後の右の div の左に浮動することです : http://postimage.org/image/fi5ndamk5/右側に div をぶら下げ、その左側にフロートを作成する制約として使用します。

float:right div が常に実際に正しくフロートするようにするにはどうすればよいですか? (データベースからコンテンツをフェッチするために while ループを実行しています。Facebook のタイムラインのように、float を使用するだけで div が属する列を指定したいと考えています。)

Answer 1

スマートなソリューションをお探しの場合は、以下をご覧ください。

JQuery と CSS を使用した Facebook タイムラインのデザイン

と

HTML と CSS のみを使用して Facebook タイムラインを作成する

お役に立てれば。

Answer 2

div と div でclear: right使用できます。このJSFiddleを参照してください。float: rightclear: leftfloat: left