it-swarm.com.de

Tauschen Sie die DIV-Position nur mit CSS

Ich versuche, zwei divs-Standorte für ein responsives Design auszutauschen (die Site sieht je nach Browserbreite unterschiedlich aus/gut für Handys).

Im Moment habe ich so etwas:

<div id="first_div"></div>
<div id="second_div"></div>

Aber wäre es möglich, ihre Placements zu tauschen, damit es so aussieht wie second_div wird zuerst nur CSS verwendet? Das HTML bleibt gleich. Ich habe versucht, Schwimmer und ähnliches 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 immer ändern. Gibt es irgendwelche Lösungen oder gibt es einfach keine Möglichkeit, dies zu tun?

68
Dragonfly

Jemand hat mich folgendermaßen verbunden: Was ist der beste Weg, um ein Element zu verschieben, das im Responsive Design oben nach unten steht .

Die Lösung dafür hat perfekt funktioniert. Obwohl der alte IE nicht unterstützt wird, spielt das für mich keine Rolle, da ich Responsive Design für Handys 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 Schwimmer, da ich sie übereinander stapeln musste und ich ungefähr fünf verschiedene Divs hatte, die ich um die Position von tauschen musste.

112
Dragonfly

Diese Frage hat bereits eine gute Antwort, aber im Geiste der Erforschung aller Möglichkeiten ist hier eine andere Technik, um dom-Elemente neu anzuordnen, während sie im Gegensatz zur absoluten Positionierungsmethode dennoch ihren Platz einnehmen können.

Diese Methode funktioniert in allen modernen Browsern und IE9 + (im Grunde jeder Browser, der display: table unterstützt) hat den Nachteil, dass sie 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 bis 2,3,1 neu angeordnet. Grundsätzlich wird alles, bei dem die Anzeige auf Tabellenkopfgruppe eingestellt ist, oben und die Tabellenfußgruppe unten positioniert. Natürlich stellt table-row-group ein Element in die Mitte.

Diese Methode ist schnell mit guter Unterstützung und erfordert viel weniger CSS als die flexbox) - Methode. Wenn Sie also beispielsweise nur ein paar Elemente gegen ein mobiles Layout austauschen möchten, schließen Sie diese Technik nicht aus.

Sie können sich eine Live-Demo zu codepen ansehen: http://codepen.io/thepixelninja/pen/eZVgLx

29
Ed Fryed

Die akzeptierte Antwort funktionierte für die meisten Browser, aber aus irgendeinem Grund wurde in iOS Chrome und Safari-Browsern der Inhalt, der als zweiter angezeigt werden sollte, ausgeblendet. Ich habe einige andere Schritte versucht, die das Stapeln von Inhalten erzwangen und schließlich habe ich die folgende Lösung ausprobiert, mit der ich den beabsichtigten Effekt erzielt habe (Reihenfolge der Inhaltsanzeige auf mobilen Bildschirmen ändern), ohne dass Fehler mit gestapelten oder versteckten Inhalten aufgetreten sind:

.container {
  display:flex;
  flex-direction: column-reverse;
}

.section1,
.section2 {
  height: auto;
}
23
Jason Awbrey

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/

7
Dmitriy Yusupov

Angenommen, ihnen folgt nichts

Wenn diese beiden div -Elemente im Grunde genommen Ihre Hauptlayoutelemente sind und ihnen im HTML-Code nichts folgt, gibt es eine reine HMTL/CSS-Lösung, die in der in dieser Geige gezeigten normalen Reihenfolge und kann vertikal spiegeln, wie in dieser Geige gezeigt mit einem zusätzlichen Wrapper div wie folgt vorgehen:

[~ # ~] 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 diesen Divs folgen, wie diese Geige veranschaulicht das Problem, wenn die folgenden Elemente nicht umbrochen werden (sie werden von #first_div Überlappt) und diese Geige) veranschaulicht das Problem, wenn die folgenden Elemente ebenfalls umbrochen werden (der #first_div ändert die Position mit beide der #second_div und den folgenden Elementen). Aus diesem Grund funktioniert diese Methode je nach Anwendungsfall möglicherweise 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.

5
ScottS

In einigen Fällen können Sie einfach das flex-box Eigenschaft order.

Sehr einfach:

.flex-item {
    order: 2;
}

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

4
Boris Yakubchik

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 die CSS der Elemente, die ich wechseln musste, nicht ändern.

0
pfmDev