Reihenfolge, wenn die schwebenden Elemente scheinbar umgekehrt sind

Ich versuche, mit dem Layout meiner Webanwendung zu arbeiten. Es wird nicht so gut ...Reihenfolge, wenn die schwebenden Elemente scheinbar umgekehrt sind

Sie können mein Beispiel hier bei Fiddle sehen: code

Wie Sie die Elemente in dem HTML-Code zu dem divs verglichen erscheinen in der umgekehrten Reihenfolge sehen.

Ich habe keine Kontrolle über den Inhalt der Verpackung "Top" -Klasse, es wird von einem Drittanbieter-Plug-in (DataTables) generiert. Daher kann ich kein "< br />" -Tag hinzufügen. Allerdings kann ich mit den Klassen in meiner CSS-Datei arbeiten, die meisten (wenn nicht alle) Elemente haben eine Klasse.

Ich möchte die Reihenfolge der Elemente in einer "richtigen" Reihenfolge und die Dropdown-Box in einer neuen Zeile angezeigt werden. Die drei Tasten sollten jedoch immer noch auf der rechten Seite sein.

Wie behebe ich das?

Quelle

2012-04-02 Nicsoft

Ist das, was Sie wollen?

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

Float rechts bewirkt, dass Ihr erstes Element in der gleichen Ebene rechts, dann zweites Element links von dem ganz rechten etc gehen, weshalb man ein umgekehrtes Element

Quelle

2012-04-02 08:46:35

Ich habe vergessen zu erwähnen, dass ich möchte, dass die drei Knöpfe auf der rechten Seite erscheinen. – Nicsoft

@Nicsoft ok bearbeitet meine Antwort, sehen, ob es passt –

Danke, es ist korrekt. Gleiche Antwort wie @Didier Ghys (kann leider nur eine Antwort wählen ..). – Nicsoft

Floating-Element nach rechts versetzt sie in umgekehrter Reihenfolge.

Sie müssten sie entweder in einer anderen Reihenfolge in das Markup einfügen, so dass sie rechts herum in der richtigen Reihenfolge angezeigt werden.

Oder Sie können text-align: right auf den Container anwenden, und nur float: left das Element auf der linken Seite angezeigt werden.

.top { text-align: right; } 

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

.dataTables_length { float: left; }

DEMO

Quelle

2012-04-02 08:45:52

Eigentlich hat, wasn I‘ Die Drop-Down-Box mit dieser Lösung in eine neue Zeile zu bringen. Es stellt sich heraus, dass @NiftyDude die Lösung hatte. Schau dir sein Beispiel an. – Nicsoft

Ich habe den Teil der Newline tatsächlich verpasst. By the way, einfach float auf '# myticketable_length' entfernen und' text-align: left' anwenden, was Sie suchen. Ich habe die Geige aktualisiert. –

Ok, danke @Didier! In meinem Beitrag habe ich übersprungen, dass ich mehrere Elemente in der zweiten Zeile haben möchte, dachte, das wäre nach dem Lösen des Problems in meinem Beitrag einfach zu beheben (Fehler ...). Ich weiß, dass dieser Beitrag bereits beantwortet ist, aber wie kann ich mehrere Elemente in einer Reihe in der zweiten Reihe bekommen. Ihr Beispiel wurde aktualisiert: [http://jsfiddle.net/2nPVZ/4/](http://jsfiddle.net/2nPVZ/4/). Ich habe schwerwiegende Probleme, die die Logik hinter der Positionierung verstehen ... – Nicsoft

Reihenfolge, wenn die schwebenden Elemente scheinbar umgekehrt sind

Antwort

Verwandte Themen