html div 垂直排列,CSS3 box-orient：horizontal|vertical 水平垂直排列子元素 属性

浏览器支持

目前没有浏览器支持 box-orient 属性。

Firefox 支持替代的 -moz-box-orient 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性

语法：box-orient: horizontal|vertical|inline-axis|block-axis|inherit;值描述测试

horizontal在水平行中从左向右排列子元素。测试

vertical从上向下垂直排列子元素。测试

inline-axis沿着行内轴来排列子元素(映射为 horizontal)。测试

block-axis沿着块轴来排列子元素(映射为 vertical)。测试

inherit应该从父元素继承 box-orient 属性的值。

案例：

html>

div

{

width:350px;

height:150px;

border:1px solid black;

/* Firefox */

display:-moz-box;

-moz-box-orient:horizontal;

/* Safari, Opera, and Chrome */

display:-webkit-box;

-webkit-box-orient:horizontal;

/* W3C */

display:box;

box-orient:horizontal;

}

段落 1。

段落 2。

段落 3。

注释：IE 不支持 box-orient 属性。

其中使用box-orient子元素p进行了横排显示，有点像float:left的意思吧？！