Ich versuche, zwei div
Standorte gegen reaktionsschnelles Design auszutauschen (die Website sieht je nach Breite des Browsers unterschiedlich aus / ist gut für Mobilgeräte).
Im Moment habe ich so etwas:
<div id="first_div"></div>
<div id="second_div"></div>
Aber wäre es möglich, ihre Platzierungen so zu tauschen, dass sie wie second_div
zuerst aussehen , nur mit CSS? Der HTML-Code bleibt gleich. Ich habe versucht, Floats und andere Dinge zu verwenden, aber es scheint nicht so zu funktionieren, wie ich es möchte. Ich möchte keine absolute Positionierung verwenden, da sich die Höhen der div
s ständig ändern. Gibt es irgendwelche Lösungen oder gibt es einfach keine Möglichkeit, dies zu tun?
css
responsive-design
Libelle
quelle
quelle
div
s aktuell angeordnet sind. Zum Beispiel ist die Lösung sehr einfach, wenn siefirst_div
bereits vorhanden istfloat: left
und vorhandensecond_div
istfloat: right
- Sie müssten lediglich die Richtungen desfloat
s umkehren . Andere Layouts wären schwieriger zu reparieren. Teilen Sie uns das aktuelle Layout mit.Antworten:
Jemand verknüpft mir diese: Was ist der beste Weg , um ein Element zu bewegen , die in Responsive Design an der Unterseite auf der Oberseite ist .
Die Lösung dafür hat perfekt funktioniert. Obwohl es den alten IE nicht unterstützt, spielt das für mich keine Rolle, da ich Responsive Design für Mobilgeräte verwende. Und es funktioniert für die meisten mobilen Browser.
Grundsätzlich hatte ich folgendes:
@media (max-width: 30em) { .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* optional */ -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .container .first_div { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } .container .second_div { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } }
Dies funktionierte für mich besser als Floats, da ich sie übereinander stapeln musste und ungefähr fünf verschiedene Divs hatte, die ich um die Position von tauschen musste.
quelle
Diese Frage hat bereits eine gute Antwort, aber im Sinne der Erforschung aller Möglichkeiten ist hier eine andere Technik, um Dom-Elemente neu zu ordnen und ihnen dennoch zu erlauben, ihren Platz einzunehmen, im Gegensatz zur absoluten Positionierungsmethode.
Diese Methode funktioniert in allen modernen Browsern und IE9 + (im Grunde jeder Browser, der display: table unterstützt) hat den Nachteil, dass sie jedoch nur für maximal 3 Geschwister verwendet werden kann.
//the html <div class='container'> <div class='div1'>1</div> <div class='div2'>2</div> <div class='div3'>3</div> </div> //the css .container { display:table; } .div1 { display:table-footer-group; } .div2 { display:table-header-group; } .div3 { display:table-row-group; }
Dadurch werden die Elemente von 1,2,3 auf 2,3,1 neu angeordnet. Grundsätzlich wird alles, bei dem die Anzeige auf Tabellenkopfgruppe eingestellt ist, oben und Tabellenfußgruppe unten positioniert. Natürlich stellt die Tabellenzeilengruppe ein Element in die Mitte.
Diese Methode ist schnell mit guter Unterstützung und erfordert viel weniger CSS als der Flexbox-Ansatz. Wenn Sie also nur ein paar Elemente gegen ein mobiles Layout austauschen möchten, schließen Sie diese Technik nicht aus.
Sie können eine Live-Demo auf codepen ansehen: http://codepen.io/thepixelninja/pen/eZVgLx
quelle
width: 100%
Linie ist nutzlos: Sie können einemdisplay: table
Element keine Breite geben .Die akzeptierte Antwort funktionierte für die meisten Browser, aber aus irgendeinem Grund wurde in iOS Chrome- und Safari-Browsern der Inhalt ausgeblendet, der als zweiter angezeigt werden sollte. Ich habe einige andere Schritte ausprobiert, bei denen Inhalte übereinander gestapelt werden mussten, und schließlich habe ich die folgende Lösung ausprobiert, die mir den beabsichtigten Effekt verlieh (Reihenfolge der Inhaltsanzeige auf mobilen Bildschirmen ändern), ohne Fehler bei gestapelten oder versteckten Inhalten:
.container { display:flex; flex-direction: column-reverse; } .section1, .section2 { height: auto; }
quelle
Nur CSS verwenden:
#blockContainer { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } #blockA { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2; } #blockB { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; box-ordinal-group: 3;
}}
<div id="blockContainer"> <div id="blockA">Block A</div> <div id="blockB">Block B</div> <div id="blockC">Block C</div> </div>
http://jsfiddle.net/thirtydot/hLUHL/
quelle
In einigen Fällen können Sie die
flex-box
Eigenschaft einfach verwendenorder
.Sehr einfach:
.flex-item { order: 2; }
Siehe: https://css-tricks.com/almanac/properties/o/order/
quelle
Vorausgesetzt, ihnen folgt nichts
Wenn diese beiden
div
Elemente im Grunde Ihr Haupt Layout - Elemente sind, und nichts folgt sie in dem HTML - Code, dann gibt es eine reine HMTL / CSS - Lösung , die die normale Reihenfolge in dieser Geige gezeigt nimmt und in der Lage, es vertikal zu kippen , wie in dieser Geige gezeigt mit ein zusätzlicher Wrapperdiv
wie folgt:HTML
<div class="wrapper flipit"> <div id="first_div">first div</div> <div id="second_div">second div</div> </div>
CSS
.flipit { position: relative; } .flipit #first_div { position: absolute; top: 100%; width: 100%; }
Dies würde nicht funktionieren , wenn Elemente diese divs folgen, wie diese Geige das Problem , wenn die folgenden Elemente veranschaulicht werden nicht umgebrochen (sie bekommen überlappen
#first_div
), und diese Geige stellt die Frage , ob die folgenden Elemente auch gewickelt werden (die#first_div
Position ändert mit sowohl der#second_div
und die folgenden Elemente ). Aus diesem Grund kann diese Methode je nach Anwendungsfall funktionieren oder auch nicht.Bei einem Gesamtlayoutschema, bei dem alle anderen Elemente in den beiden Divs vorhanden sind, kann dies funktionieren. In anderen Szenarien ist dies nicht der Fall.
quelle
Diese Lösung hat bei mir funktioniert:
Verwenden eines übergeordneten Elements wie:
.parent-div { display:flex; flex-direction: column-reverse; }
In meinem Fall musste ich das CSS der Elemente, die ich wechseln musste, nicht ändern.
quelle
Unter der Annahme, dass beide Elemente eine Breite von 50% haben, habe ich Folgendes verwendet:
CSS:
.parent { width: 100%; display: flex; } .child-1 { width: 50%; margin-right: -50%; margin-left: 50%; background: #ff0; } .child-2 { width: 50%; margin-right: 50%; margin-left: -50%; background: #0f0; }
html:
<div class="parent"> <div class="child-1">child1</div> <div class="child-2">child2</div> </div>
Beispiel: https://jsfiddle.net/gzveri/o6umhj53/
Übrigens funktioniert dieser Ansatz für 2 beliebige Elemente in einer langen Liste von Elementen. Zum Beispiel habe ich eine lange Liste von Elementen mit 2 Elementen pro Zeile und ich möchte, dass jedes 3. und 4. Element in der Liste vertauscht wird, damit Elemente in einem Schachstil gerendert werden. Dann verwende ich diese Regeln:
.parent > div:nth-child(4n+3) { margin-right: -50%; margin-left: 50%; } .parent > div:nth-child(4n+4) { margin-right: 50%; margin-left: -50%; }
quelle