html - 如何确保所有 都带有 float :right; actually float right?

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 总是 float 到最后一个右边的 div 的左边，如下所示: http://postimage.org/image/fi5ndamk5/它似乎将右侧悬挂的 div 视为使其 float 到其左侧的约束。

如何确保 float:right div 始终正确 float ？(我正在做一个 while 循环来从数据库中获取内容，我想通过使用 float 来指定 div 所属的列，有点像在 Facebook 时间轴中。)

Answer 1

您可以使用 clear: right与 float: right div 和 clear: left与 float: left div。看这个JSFiddle供引用。