浮动元素似乎颠倒的顺序

我正在尝试使用我的web应用程序的布局。它不会那么好......浮动元素似乎颠倒的顺序

您可以在小提琴看到我例如：code

正如你所看到的元素出现在比在HTML代码的div相反的顺序。

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

我想要以“正确”顺序显示元素的顺序，并在新行上显示下拉框。三个按钮应该仍然在右侧。

我该如何解决这个问题？

来源

2012-04-02 Nicsoft

这是你想要的吗？

http://jsfiddle.net/2DdFJ/13/

浮动权限会导致在同一水平线上的第一个元素去正确的，那么第二个元素的最右边等等，这是左为什么你有一个逆转的元素

来源

2012-04-02 08:46:35

我忘了提及我希望三个按钮出现在右侧。 – Nicsoft 2012-04-02 08:57:55

@Nicsoft ok编辑我的答案，看看它是否适合 – 2012-04-02 09:01:30

谢谢，它是正确的。与@Didier Ghys相同的答案（不幸的是，只能选择一个答案..）。 – Nicsoft 2012-04-02 09:07:20

右侧的浮动元素将其置于相反的顺序。

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

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

.top { text-align: right; } 

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

.dataTables_length { float: left; }

DEMO

来源

2012-04-02 08:45:52

其实，我没”使用此解决方案可以在新产品线上获得下拉框。事实证明，@NiftyDude有解决方案。看看他的例子。 – Nicsoft 2012-04-02 09:49:00

我错过了换行的部分。顺便说一句，简单地删除'＃mytickettable_length'上的浮点数并应用'text-align：left'将导致你的结果。我已经更新了小提琴。 – 2012-04-02 09:52:43

好的，谢谢@Didier！在我的文章中，我跳过了第二行中的几个元素，认为在解决我的帖子中的问题之后很容易修复（错误...）。我知道这篇文章已经得到解答，但是我怎样才能在第二行中获得连续的几个元素。更新你的例子：[http://jsfiddle.net/2nPVZ/4/](http://jsfiddle.net/2nPVZ/4/）。我掌握了定位背后逻辑的严重问题...... – Nicsoft 2012-04-02 10:17:20

浮动元素似乎颠倒的顺序

回答

相关问题