Tauschen Sie die DIV-Position nur gegen CSS

77

Ich versuche, zwei divStandorte 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_divzuerst 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 divs ständig ändern. Gibt es irgendwelche Lösungen oder gibt es einfach keine Möglichkeit, dies zu tun?

Libelle
quelle
Sind Sie besorgt über IE8? ( caniuse.com/#feat=css-mediaqueries ) Versuchen Sie es mit Medienabfragen.
Mooseman
Das ist es, was ich gerade für responsives Design verwende, aber ich habe diese die unterste Div, die zuerst sein muss, wenn es für mobile Geräte ist.
Libelle
1
Es hängt davon ab, wie die divs aktuell angeordnet sind. Zum Beispiel ist die Lösung sehr einfach, wenn sie first_divbereits vorhanden ist float: leftund vorhanden second_divist float: right- Sie müssten lediglich die Richtungen des floats umkehren . Andere Layouts wären schwieriger zu reparieren. Teilen Sie uns das aktuelle Layout mit.
Rory O'Kane
Folgt irgendetwas diesen Elementen?
ScottS

Antworten:

124

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.

Libelle
quelle
4
Hier ist ein Beispiel, wie Sie die Flexbox-Methode verwenden können.
Blimmer
Vielen Dank für dieses Beispiel. Ich konnte es bearbeiten, um mein Ziel zu erreichen: jsfiddle.net/5rd9xwsc/73
Ryan
1
jsfiddle.net/5rd9xwsc/75 ist ein noch besseres Beispiel für das, was ich versucht habe: Bilder werden immer mit Text abgewechselt , auch wenn Sie die Fenstergröße ändern.
Ryan
1
Ich liebe StackOverflow so sehr und dass ich meine Aktivität durchsuchen und diesen Beitrag wiederfinden konnte. Ich habe die Geige aktualisiert, weil jsfiddle.net/5rd9xwsc/82 noch näher an dem liegt, was ich tun wollte (in WordPress).
Ryan
Sehr schöne Lösung!
Stéphane
33

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

Ed Fryed
quelle
Die width: 100%Linie ist nutzlos: Sie können einem display: tableElement keine Breite geben .
Clément
1
Mein Fehler. Es ist nicht in dem Beispiel, das ich gemacht habe, muss sich versehentlich hier eingeschlichen haben. Unabhängig davon, ob es dort ist, funktioniert die Methode trotzdem. :)
Ed Fryed
Dies ist sehr hilfreich, wenn Sie sich mit Formulareingaben befassen, über denen normalerweise Beschriftungen liegen, die jedoch zuvor im DOM positioniert sind (damit wir die Beschriftungen basierend auf dem Status der Eingabe ausrichten können). Ideal auch für schwebende Etiketten.
Sơn Trần-Nguyễn
1
Dies ist eine wirklich großartige Möglichkeit, dies ohne Flex zu tun. Selbst im Jahr 2019 erhalten wir 4% IE9-Verkehr.
secretwep
29

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;
}
Jason Awbrey
quelle
bis die beste und einfachste Lösung für mich
w411 3
Vielen Dank .. Sehr geschätzt
Sujan Shrestha
8

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/

Dmitriy Yusupov
quelle
8

In einigen Fällen können Sie die flex-boxEigenschaft einfach verwenden order.

Sehr einfach:

.flex-item {
    order: 2;
}

Siehe: https://css-tricks.com/almanac/properties/o/order/

Boris Yakubchik
quelle
1
@Sarfaraj stellen Sie sicher, dass Ihr flex: display aktiv ist und der Befehl ORDER und nicht Flex-order lautet. Ich habe diesen Fehler gemacht
Sweet Chilly Philly
5

Vorausgesetzt, ihnen folgt nichts

Wenn diese beiden divElemente 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 Wrapper divwie 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_divPosition ä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.

ScottS
quelle
4

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.

pfmDev
quelle
0

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%;
  }
GZveri
quelle