3

我有一个 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 div 始终正确浮动？（我正在做一个while循环来从数据库中获取内容，我想通过使用float来指定div所属的列，有点像Facebook时间轴。）

4

2 回答 2

3

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

使用 JQuery 和 CSS 设计 Facebook 时间线

和

仅使用 HTML 和 CSS 创建 Facebook 时间线

希望这可以帮助。

于 2012-08-12T10:47:19.297 回答
3

您可以clear: right与float: rightdiv 和 divclear: left一起float: left使用。请参阅此JSFiddle以供参考。

于 2012-08-12T11:07:47.877 回答