浮动元素似乎颠倒时的顺序答案

【问题标题】：Order when floating elements seems to be reversed浮动元素似乎颠倒时的顺序
【发布时间】：2012-04-15 22:14:55
【问题描述】：

我正在尝试使用我的 Web 应用程序的布局。不太顺利……

你可以在 Fiddle 看到我的例子：code

如您所见，与 html 代码中的 div 相比，元素以相反的顺序出现。

我无法控制包装“顶级”类的内容，它是由第三方插件（DataTables）生成的。因此，我不能添加任何“”标签。但是，我可以使用我的 css 文件中的类，大多数（如果不是全部）元素都有一些类。

我希望元素的顺序以“正确”的顺序呈现，并且下拉框位于新的一行。不过，这三个按钮仍应位于右侧。

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

向右的浮动元素使它们以相反的顺序排列。

您必须在标记中以不同的顺序放置它们，因此向右浮动会以正确的顺序显示它们。

或者您可以将text-align: right 应用于容器，并且只有float: left 元素出现在左侧。

.top { text-align: right; }

.DTTT_container, .ColVis { display: inline-block }

.dataTables_length { float: left; }

【讨论】：

实际上，我并没有使用此解决方案将下拉框放在新行上。事实证明@NiftyDude 有解决方案。看看他的例子。
我确实错过了换行符的部分。顺便说一句，只需删除 #mytickettable_length 上的 float 并应用 text-align: left 即可得到您所追求的结果。我已经更新了小提琴。
好的，谢谢@Didier！在我的帖子中，我跳过了我想要第二行的几个元素，认为在解决我的帖子中的问题后很容易解决（错误......）。我知道这篇文章已经回答了，但是我怎样才能在第二行连续获得几个元素。更新了您的示例：http://jsfiddle.net/2nPVZ/4/。我在掌握定位背后的逻辑时遇到了严重的问题......

【解决方案2】：

这是你想要的吗？

向右浮动会导致同一级别中的第一个元素向右移动，然后是最右边左侧的第二个元素等，这就是为什么你有一个反转元素

【讨论】：