Порядок, когда плавающие элементы кажутся обратными

Question

Я пытаюсь работать с макетом моего веб-приложения.Это не так хорошо ...

Вы можете увидеть мой пример здесь, на Fiddle: код

Как видите, элементы отображаются в обратном порядке по сравнению сdivs в html-коде

У меня нет контроля над содержимым класса «top» обертки, он создается сторонним плагином (DataTables).Следовательно, я не могу добавить тег "
".Тем не менее, я могу работать с классами в моем css-файле, большинство (если не все) элементы имеют некоторый класс.

Я бы хотел, чтобы порядок элементов был представлен в «правильном» порядке и раскрывающийся список на новой строке.Три кнопки все еще должны быть на правой стороне.

Как это исправить?

Answer 1

Плавающий элемент вправо помещает их в обратном порядке.

Вам нужно будет либо поместить их в разном порядке в разметке, поэтому плавающее право покажет их в правильном порядке.

Или вы можете применить text-align: right к контейнеру, и только float: left элемент появится слева.

.top { text-align: right; }

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

.dataTables_length { float: left; }

DEMO

Answer 2

Это то, что вы хотите?

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

Float right заставляет ваш первый элемент на том же уровне идти вправо, затем второй элемент слева от самого правого и т. Д., Именно поэтому у вас есть обращенные элементы