Понедельник, 13 Мая 2013 12:17

Изменить порядок элементов

Written by 
Оцени эту запись
(3 Голоса)

В этой статье мы рассмотрим CSS свойство -webkit-box-ordinal-group, которое меняет или задает порядок элементов типа -webkit-box и -webkit-inline-box.

 

 

Свойство -webkit-box-ordinal-group задает порядковый номер элемента в родителе. Чем выше значение свойства, тем дальше элемент расположен.

 

Пример:

 

.child:nth-child(1) {

        -webkit-box-ordinal-group: 3;
}
.child:nth-child(2) {
        -webkit-box-ordinal-group: 1;
}
.child:nth-child(3) {
        -webkit-box-ordinal-group: 4;
}
.child:nth-child(4) {
        -webkit-box-ordinal-group: 2;
}
 
Первый дочерний элемент будет идти под номером 3, второй будет первым и т.д. В результате получим такой порядок - 2, 4, 1, 3.
 
 
Полный код:
 
 
<style>
    .parent {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        height: 100px;
        background: blue;
    }
    .child {
        display: -webkit-box;
        background: red;
        -webkit-box-flex: 1;
        margin: 20px;
    }
    .child:nth-child(1) {
        -webkit-box-ordinal-group: 3;
    }
    .child:nth-child(2) {
        -webkit-box-ordinal-group: 1;
    }
    .child:nth-child(3) {
        -webkit-box-ordinal-group: 4;
    }
    .child:nth-child(4) {
        -webkit-box-ordinal-group: 2;
    }
</style>
<div class='parent'>
    <div class='child'>1</div>
    <div class='child'>2</div>
    <div class='child'>3</div>
    <div class='child'>4</div>
</div>
 
 
Результат:
 
 
1
2
3
4
 
 
 
Хочу обратить внимание, что данный пример будет работать только в Chrome и Safari. Аналогичный результат можно получить для Firefox, используя префикс -moz.
 
 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов