it-swarm.com.de

kehren Sie die Reihenfolge der Kinder von div um

Wie kann man die Reihenfolge der Kinder eines Divs mit reinem CSS umkehren?

Beispielsweise:

Ich möchte

<div id="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>

angezeigt werden als:

D

C

B

A

Ich habe eine Demo zu JSfiddle erstellt: http://jsfiddle.net/E7cVs/2/

33
Angelo A

Ein bisschen knifflig, kann aber funktionieren; nur um dir die idee zu geben:

div#top-to-bottom {
    position: absolute;
    width:50px;
    text-align: left;
    float: left;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div#top-to-bottom > div {
    width: 50px;
    height: 50px;
    position: relative;
    float: right;
    display: block;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

spiegeln Sie in der vertikalen Achse sowohl den Container als auch die Kinder. Die Kinder folgen der umgekehrten y-Achse des Containers, aber die Kinder selbst sind wieder auf dem Kopf.

Demo

21
vals

Die moderne Antwort ist

#parent {
  display: flex;
  flex-direction: column-reverse;
}
72
Pbrain19
<style>
#parent{
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}
</style>
9
Halit YEŞİL

Nur CSS-Lösung: (Ich habe alle Selektoren auf Klassenselektoren umgestellt, um mögliche Spezifitätsprobleme zu vermeiden. Nur eine Gewohnheit von mir und anderen. I habe auch Stile entfernt, die für das Beispiel nicht relevant sind.)

.top-to-bottom {
    position: absolute;
}

.child {
    width: 50px;
    height: 50px;
    margin-top: -100px; /* height * 2 */
}

.child:nth-child(1) {
    margin-top: 150px; /* height * ( num of childs -1 )  */
}

.a {
    background:blue;

}
.b {
    background:red;
}

.c {
    background:purple;
}

.d {
    background:green;
}

Demo:http://jsfiddle.net/zA4Ee/3/

Javascript-Lösung:

var parent = document.getElementsByClassName('top-to-bottom')[0],
    divs = parent.children,
    i = divs.length - 1;

for (; i--;) {
    parent.appendChild(divs[i])
}

Demo:http://jsfiddle.net/t6q44/5/

8
banzomaikaka

Sie können dies mit reinem CSS tun, aber es gibt große Einschränkungen. Versuchen Sie es mit einer der folgenden Methoden, aber beide haben ihre Kehrseite:

  1. Schwimme deine Divs nach rechts. Dies funktioniert nur, wenn Ihre Elemente horizontal angezeigt werden. Es wird auch Ihre Elemente nach rechts verschieben. Sobald Sie sie löschen oder zum normalen Dokumentenfluss zurückkehren, wird die Reihenfolge wiederhergestellt.
  2. Durch die Verwendung der absoluten Positionierung. Dies ist schwierig für Elemente, die keine definierte Höhe haben.

Wenn Sie nach rechts schweben, wird die Reihenfolge umgekehrt, in der sie horizontal angezeigt werden. Hier ist eine jsFiddle-Demo .

<div id="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

#parent div {
    float: right;
}

Die absolute Position löst die Elemente aus dem normalen Dokumentenfluss auf und ermöglicht es Ihnen, sie genau nach Ihren Wünschen zu positionieren. Hier ist eine Geigen-Demo .

4
Mohamad

100% arbeiten diesen Code:

<style type="text/css">
    .wrapper {
       display: flex;
       flex-direction: column-reverse;
    }
</style>

<div class="wrapper">
   <div class="main">top</div>
   <div class="footer">bottom</div>
</div>
3
mehul

Hier ist eine einfachere, portablere, vollständig vorangestellte Antwort auf @vals. Beachten Sie, dass CSS3 2D-Transformationen ab Februar 2017 nur noch 94% Unterstützung bietet.

.reverse, .reverse>* {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
<div class="reverse">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
</div>
1
Lachmanski

Dies ist ein weiterer einfacher moderner Weg. Genießen!

#parent{
     /* Just set display flex to parent div */
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
      
     /* Use this part if you need also a column direction */
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
}

/* This way you can decide the order of the internal divs */
#parent div:nth-child(1){
    -webkit-order: 4;
    -ms-order: 4;
    order: 4;
}
#parent div:nth-child(2){
    -webkit-order: 3;
    -ms-order: 3;
    order: 3;
}
#parent div:nth-child(3){
    -webkit-order: 2;
    -ms-order: 2;
    order: 2;
}
#parent div:nth-child(4){
    -webkit-order: 1;
    -ms-order: 1;
    order: 1;
}
 
<div id="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>
1
Z.Dima

Um auf flex Antworten aufzubauen, die an anderer Stelle hier vorgestellt werden, finden Sie hier eine vollständige browserübergreifende Lösung gemäß Autoprefixer :

#parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
} 
0
MQuiggGeorgia

anzeige: Tabellenkopfgruppe; Anzeige: Tabellenfußgruppe;

für Kinder

anzeige: Tabelle;

für Eltern

0
TeT Psy