display:-webkit-box;
display:box;
box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-direction:reverse;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
}
</style>
演示效果：
box-ordinal-group属性
box-direction属性可以改变盒子内部元素的流动顺序，而box-ordinal-group属性能够设置每个子元素在盒子中的具体显示位置，语法如下：
box-ordinal-group：<integer>
取值说明：
属性值是一个自然数，从1 开始，用来设置子元素的位置符号。子元素的分布将根据这个属性值从小到大进行排列。在默认情况下，子元素将根据元素的位置进行排列。
注意：如果没有指定box-ordinal-group属性值的子元素，则其序号默认都为1，并且序号相同的元素将按照他们在文档中的加载的顺序进行排列。
实战体验：垂直网页布局
HTML代码：
XML/HTML Code复制内容到剪贴板
<div id="box">
<div id="box1"><img src="images/web1_01.gif" /></div>
<div id="box2"><img src="images/web1_02.gif" /></div>
<div id="box3"><img src="images/web1_03.gif" /></div>
<div id="box4"><img src="images/web1_04.gif" /></div>
</div>
CSS3代码：
CSS Code复制内容到剪贴板
<style type="text/css">
body {
margin:0;
padding:0;
text-align:center;
background:#d9bfe8;
}
#box {
margin:auto;
text-align:left;
width:988px;
}
/*定义盒形显示及盒内元素垂直显示*/
#box {
display : -moz-box;
