如何确保所有 <div> 都带有 float:right;实际上漂浮对吗？答案

【问题标题】：How to make sure that all <div>s with float:right; actually float right?如何确保所有 <div> 都带有 float:right;实际上漂浮对吗？
【发布时间】：2023-03-22 21:10:01
【问题描述】：

我有一个 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时间线。）

【问题讨论】：

标签： css html two-columns

【解决方案1】：

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

【讨论】：

赞成，但 -1 用于在简单的 CSS 上使用杂乱的内联样式ಠ_ಠ
我听到了，但请记住我回答的重点是尽可能以最简单的方式解决手头的问题，而不是宣扬我关于漂亮代码的哲学。我确信 OP 永远不会在生产代码中使用内联样式。
我在问这个问题之前尝试了这个，但它不起作用，因为除了这个 div 容器中使用的列之外，我还有其他列。我应该在我的问题中提到这一点。最终对我有用的是有选择地使用 clear 以及一些可选的位置：绝对使用。这不是一个简单的方法，但它适用于我的布局。

【解决方案2】：

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

Facebook Timeline Design using JQuery and CSS

和

Create Facebook Timeline Using HTML and CSS Only

希望这会有所帮助。

【讨论】：

谢谢，这些页面上的信息很有趣，但它并不完全适用于我的问题。