思洋互动网站建设学前班

调整元素的位置--box-ordinal-group属性

CSS 3新增的box-ordinal-group属性，用于定义盒元素内部的子元素的显示位置。基于webkit内核的替代私有属性是-webkit-box-ordinal-group，基于gecko内核的替代私有属性是-moz-box-ordinal-group。

1. 参数说明

box-ordinal-group属性的语法如下：

广州网站设计

1. box-ordinal-group: <integer>; 

取值说明如下。

<integer>：一个自然整数，从1开始，表示子元素的显示位置。子元素将根据这个值重新排序，值相等的，将取决于源代码的顺序。子元素的默认值均为1，按照源代码的位置顺序进行排列。

2. 示例介绍

基于示例4-1，在盒布局的方式下，调整菜单栏和工具栏的显示位置。调整样式表如下。

【示例4-4】 调整子元素的显示位置。

广州网站设计

1. <style type="text/css"> 
2. .container {  
3.     display:-webkit-box;  
4.     display:-moz-box;  
5.     display:box;  
6.     /* 定义为横向编排显示 */  
7.     -webkit-box-orient:horizontal;          /* 兼容webkit内核 */  
8.     -moz-box-orient:horizontal;                 /* 兼容gecko内核 */  
9.     box-orient:horizontal;                      /* 标准用法 */  
10. }  
11. .container div {  
12.     color:#FFF;  
13.     font-size:12px;  
14.     padding:10px;  
15.     line-height:20px;  
16. }  
17. .container div ul {  
18.     margin:0;  
19.     padding-left:20px;  
20. }  
21. .container .left-aside {  
22.     background-color:#F63;  
23.     /* 设置菜单栏的位置为2*/  
24.     -webkit-box-ordinal-group:2;            /* 兼容webkit内核 */  
25.     -moz-box-ordinal-group:2;               /* 兼容gecko内核 */  
26.     box-ordinal-group:2;                    /* 标准用法 */  
27. }  
28. .container .center-content {  
29.     background-color:#390;  
30.     width:200px;  
31. }  
32. .container .right-aside {  
33.     background-color:#039;  
34.     /* 设置工具栏的位置为3*/  
35.     -webkit-box-ordinal-group:3;                /* 兼容webkit内核 */  
36.     -moz-box-ordinal-group:3;               /* 兼容gecko内核 */  
37.     box-ordinal-group:3;                    /* 标准用法 */  
38. }  
39. </style> 

广州网站建设

运行结果如图4-4所示。

图4-4  经过调整的显示顺序

代码分析：在示例4-4中，把菜单栏的box-ordinal-group属性设置为2，把工具栏的box-ordinal-group属性设置为3，以改变三个栏目的显示顺序。如果4-4所示，三个栏目按照预定的顺序显示。    广州网站建设