如何确保所有<div> s与float：right;实际上是浮动的吗？</div>

Question

我有一个包含多个不同高度的内部div的div，以便创建类似于Facebook时间轴的两列输出，有点像这样：

<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 divs总是实际浮动？ （我正在做一个while循环来从数据库中获取内容，我想通过使用float来指定div所属的列，类似于Facebook时间线。）

Answer 1

如果您正在寻找智能解决方案，请尝试查看;

<强> Facebook Timeline Design using JQuery and CSS

和

<强> Create Facebook Timeline Using HTML and CSS Only

希望这有帮助。

Answer 2

您可以将clear: right与float: right div一起使用，将clear: left与float: left div一起使用。请参阅此JSFiddle以供参考。