Как можно изменить порядок дел'ы дети на чистом CSS?
Например:
Я хочу
<div id="parent">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
будет отображаться как:
D
C
B
A
Я'вэ создал демо на JSfiddle:
Современный ответ
#parent {
display: flex;
flex-direction: column-reverse;
}
Немного сложно, но может работать; просто чтобы дать вам идею:
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);
}
зеркала в вертикальной оси в обе емкости и ребенка. Чайлдс следовать перевернутый y оси контейнера, но и сами дети снова подняться.
<style>
#parent{
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
</style>
_Решением_Усс:__ ( Я поменял все селекторов, селекторов класса, чтобы не заниматься вопросами специфики, что может произойти. Просто привычка и другие. Я'вэ тоже убрали стили, не относящиеся к примеру. )
.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:
Решение в 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/
Вы можете сделать это с чистого CSS, но есть несколько основных моментов. Попробуйте использовать один из следующих методов, но и рисовать их спинами:
Плывет в обратном порядке, в котором они'вновь отображается горизонтально. [Здесь's в jsFiddle демо][1].
<div id="parent">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
#parent div {
float: right;
}
Абсолютную позицию вспыхнет элементы из нормального потока документа и позволяют позиционировать тогда точно, как вы выберете. Здесь'ы [скрипка демо][2].
Здесь'ы более простой, портативный, полностью с префиксом взять на @Валс ответа. Обратите внимание, что с помощью CSS3 2D-трансформации лишь 94% поддержки, как в феврале 2017 года.
в
.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>
в
Это еще один простой современный способ. Наслаждайтесь! в
#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>
в
Чтобы построить на флекс представлен в другом месте, вот ответы, вот полный кросс-браузерное решение, согласно 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;
}