зваротны парадак дзяцей Div ў

Як вы можаце змяніць парадак ніжэйстаячых элементаў Div з чыстым CSS?

Напрыклад:

мне трэба

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

будзе адлюстроўвацца як:

D

C

B

A

I've created a demo on JSfiddle: http://jsfiddle.net/E7cVs/2/

24
Калі вы сканчалі larrybotha/стылістычны даведнік на GitHub, інуітаў філіял мае адну з лепшых сетак, якія я калі-небудзь выкарыстаў. Ён можа зрабіць гэта для вас.
дададзена аўтар dewwwald, крыніца
@MikeRobinson Калі ласка, пакладзеце туды ў адказ, які працуе ... і калі гэта толькі ў найноўшай WebKit/светлячок па начах; Я не ведаю, як з традыцыйнымі метадамі.
дададзена аўтар bwoebi, крыніца
@AngeloA Чаму абсалютная пазіцыянаванне непажадана?
дададзена аўтар crush, крыніца
Якія браўзэры вам неабходна падтрымліваць (таму што гэта будзе выдатны спосаб, каб пачаць гуляць з Flexbox)
дададзена аўтар Mike Robinson, крыніца
@crush я wan't працаваць з нявызначаным/неабмежаваным Div-Чайлдсом, якія ўсё індывідуальна маюць іншую вышыню/шырыню. Я хачу, каб паказаць прастору-паміж Чайлдсом і што не можа быць дасягнута Абсалютна размешчаны, праўда?
дададзена аўтар Angelo A, крыніца
Я аддаю перавагу, каб падтрымліваць усе браўзэры
дададзена аўтар Angelo A, крыніца
Я думаю, што адзіны спосаб зрабіць гэта чыста з CSS працуе з пазіцыянаваннем.
дададзена аўтар Sven Bieder, крыніца

10 адказы

сучасны адказ

#parent {
  display: flex;
  flex-direction: column-reverse;
}
55
дададзена
дададзена аўтар Tracker1, крыніца
Невялікая нататка з this-, калі ў вас ёсць перапаўненне на DIV , ён не будзе пракручваць правільна з калоннай зваротны у Firefox і IE/EDGE (але выдатна працуе ў Chrome). Хуткая скрыпка: jsfiddle.net/jbkmy4dc/2
дададзена аўтар TranquilMarmot, крыніца

Крыху больш складана, але можа працаваць; проста каб даць вам ідэю:

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);
}

люстэрка ў вертыкальнай восі як у кантэйнеры і Чайлдс. У Чайлдс варта перавернутай у восі кантэйнера, але самі дзеці зноў падніміцеся.

дэманстрацыйная

18
дададзена
А гэта можа быць лепшым рашэннем! Дзякуй, сэр.
дададзена аўтар Angelo A, крыніца


8
дададзена
Невялікая нататка з this-, калі ў вас ёсць перапаўненне на DIV , ён не будзе пракручваць правільна з калоннай зваротны у Firefox і IE/EDGE (але выдатна працуе ў Chrome). Хуткая скрыпка: jsfiddle.net/jbkmy4dc/3
дададзена аўтар TranquilMarmot, крыніца

CSS only solution: ( I switched all selectors to class selectors as to not deal with specificity issues that could occur. Just an habit of mine and others. I've also removed styles not relevant to the example. )

.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 Рашэнне:

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/

7
дададзена
Ваш адказ кажа, што ёсць CSS толькі рашэнне, але Javascript уключаны ў jsfiddle дэма.
дададзена аўтар crush, крыніца
Яго проста пераключыць клас «перамыкач». Гэта не частка рашэння. Вам не трэба наогул. Яго проста выдатна бачыць дзівы пераключэння іх парадак.
дададзена аўтар banzomaikaka, крыніца
Дзякуй за ваша рашэнне, гэта толькі не тое, што я шукаю небудзь. Я думаю, што гэта не можа быць выпраўлена толькі з дапамогай CSS, таму я буду выкарыстоўваць JS. Дзякуючы.
дададзена аўтар Angelo A, крыніца

Вы можаце зрабіць гэта з чыстым CSS, але ёсць асноўныя папярэджваньняў. Паспрабуйце выкарыстаць адзін з наступных метадаў, але абодва маюць звярнуць спіну:

  1. Плывучы вашыя дзівы правільна. Гэта будзе працаваць, толькі калі элементы з'яўляюцца ў гарызантальным становішчы. Ён таксама будзе перамяшчацца свае элементы направа. Як толькі вы ачысціце іх або вярнуць іх да нармальнага патоку дакумента, парадак вернецца.
  2. <�Літый> Выкарыстоўваючы абсалютная пазіцыянаванне. Гэта складана для элементаў, якія не маюць пэўную вышыню.

Плавае права будзе ў зваротным парадку, у якім яны адлюстроўваюцца ў гарызантальным становішчы. Вось jsFiddle дэма .

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

#parent div {
    float: right;
}

Абсалютная становішча ўспыхне элементы з нармальнага патоку дакумента і дазваляе пазіцыянаваць затым дакладна, як вы выбіраеце. Вось скрыпку дэма .

4
дададзена
Хлопцы, я дадаў яшчэ адну скрыпку для абсалютнай пазіцыянавання.
дададзена аўтар Mohamad, крыніца
Тое, што вы хочаце зрабіць, гэта не ўяўляецца магчымым з дапамогай CSS. Я даў вам два магчымых спосабу зрабіць гэта з асноўнымі агаворкамі. Абодва Фідэль абнаўляюцца. Акрамя гэтага, вы павінны паспрабаваць рашэнне JS.
дададзена аўтар Mohamad, крыніца
Тады гэта немагчыма.
дададзена аўтар Mohamad, крыніца
Маё дрэннае, я зрабіў памылку. Я рэдагаваў адказ, каб адлюстраваць гэта. Гэта будзе працаваць толькі ў тым выпадку, калі элементы усплываюць. Як толькі вы ачысціце іх няўдачы.
дададзена аўтар Mohamad, крыніца
Глядзіце маё рэдагаванне. Я уключыў дэма.
дададзена аўтар Mohamad, крыніца
@Mohamad Але па гарызанталі, тэкст таксама будзе права ...
дададзена аўтар bwoebi, крыніца
@Mohamad Гэта не чакаецца? Чаканы заказ перавернутая.
дададзена аўтар bwoebi, крыніца
Ён не хоча, каб абсалютная пазіцыянаванне, і ваш паплавок: правы рашэнне не працуе.
дададзена аўтар crush, крыніца
@Mohamad Ці вы абнавіць скрыпку? Таму што ён усё яшчэ паказвае іх у A, B, C, D парадку
дададзена аўтар crush, крыніца
Ваш дэма не працуе. Яны па-ранейшаму ў тым жа парадку: А, У, З, D
дададзена аўтар crush, крыніца
Я паспрабаваў абодва гэтых метаду, і ні ўдалося. Вы можаце пакінуць скрыпку?
дададзена аўтар crush, крыніца
@Mohamed ды вы маеце рацыю. Я таксама прыйшоў да высновы, што гэтая праблема не можа быць фіксаванай, на жаль. Я буду выкарыстоўваць рашэнне JS. Дзякуй за ваш уклад.
дададзена аўтар Angelo A, крыніца

Выкарыстоўвайце abosolute пазіцыянаванне і верхні левы

2
дададзена
Вось скрыпка Адноснае, але я не думаю, што гэта тое, што вы хочаце, альбо: jsfiddle.net/E7cVs/7
дададзена аўтар crush, крыніца
Вось скрыпка яго праца Абсалютна размешчаны: jsfiddle.net/E7cVs/5 , але гэта не адказ ён хоча.
дададзена аўтар crush, крыніца
Я ўжо зразумеў, абсалютная пазіцыянаванне па-за. Але мне сапраўды гэта трэба для працы Адноснае.
дададзена аўтар Angelo A, крыніца
Я не хачу абсалютнай пазіцыі кожнага элемента. Для мяне гэта рашэнне праблемы з праблемай. Мне трэба становішча адносна.
дададзена аўтар Angelo A, крыніца

Вось больш просты, партатыўны, цалкам прыстаўкі ўзяць на @vals адказу. Звярніце ўвагу, што CSS3 2D Ператварае толькі 94% падтрымкі па стане на люты 2017 года.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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>
</div> </div>
1
дададзена

Дысплей: табліца загаловак-група; дысплей: настольны калантытул-група;

для дзяцей

дысплей: стол;

для бацькоў

0
дададзена

Для таго, каб пабудаваць на прагінаецца адказы прадстаўлены ў іншым месцы тут, тут уяўляе сабой комплекснае рашэнне крос-браўзэр у адпаведнасці з 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
дададзена

Гэта яшчэ адзін просты сучасны спосаб. Атрымлівайце асалоду ад!<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#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>
</div> </div>
0
дададзена