CSS3代码：
CSS Code复制内容到剪贴板
<style type="text/css">
body{/*文档样式*/
margin:0;padding:0px;/*清除页边距*/
text-align:center;/*文档居中对齐*/
background:#170843;
}
#box{
margin:auto;/*文档居中对齐*/
text-align:center;
width:975px;
}
/*定制各个栏目的宽度*/
#box1{width:185px;}
#box2{width:601px;}
#box3{width:189px;}
/*定制子包含框的盒子显示，其包含的元素水平流动*/
#sub-box{
display:-moz-box;
display:-webkit-box;
display:box;
box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
}
</style>
演示效果：
box-direction属性
box-direction属性可以改变盒子元素中内部元素的流动顺序，该属性基本语法：
box-direction：normal | reverse | inherit
取值简单说明：
normal：正常显示顺序，即如果盒子元素的box-origent属性值为horizontal，则其包含的子元素按照从左到右的顺序显示，即每个子元素的左边总是靠近前一个子元素的右边；如果盒子元素的box-origent属性值设置为vertical，则其包含的子元素按照从上到下的顺序显示。
reverse：反向显示，盒子所包含的子元素的显示顺序将于normal相反。
inherit：继承上级元素的显示顺序。
实战体验：反向布局网页（以上面的案例为基础）：
CSS3代码：
CSS Code复制内容到剪贴板
<style>
body{
margin:0;padding:0px;
text-align:center;
background:#170843;
}
#box{
margin:auto;
text-align:center;
width:975px;
}
#box1{width:185px;}
#box2{width:601px;}
#box3{width:189px;}
#sub-box{
display:-moz-box;
