CSS3 Box-orient Properties

CSS3 Box-orient Properties

CSS Reference Manuals

Instance

Arranges the child elements of a DIV element horizontally:

div{width:350px;height:100px;border:1px solid black;  /* Firefox */display:-moz-box;-moz-box-orient:horizontal; /* Safari, Opera, and Chrome */display:-webkit-box;-webkit-box-orient:horizontal; / * */display:box; box-orient:horizontal; }  

Try it yourself.

Browser support

There is currently no browser support for the Box-orient property.

Firefox supports an alternative-moz-box-orient property.

Safari, Opera, and Chrome support alternative-webkit-box-orient properties.

Definition and usage

The Box-orient property specifies that the child elements of the box should be arranged horizontally or vertically.

Tip: child elements in the horizontal box are displayed from left to right, while the child elements of the vertical box are displayed from top to bottom. However, box-direction and Box-ordinal-group can change that order.

Default value:	Inline-axis
Inheritance:	No
Version:	CSS3
JavaScript Syntax:	object. style.boxorient= "Vertical"

Grammar

Box-orient:horizontal|vertical|inline-axis|block-axis|inherit;

value	Description	Test
Horizontal	Arranges child elements from left to right in horizontal rows.	Test
Vertical	Arranges child elements vertically from top to bottom.	Test
Inline-axis	Arranges child elements along the inline axis (mapped to horizontal).	Test
Block-axis	Arranges child elements along the block axis (mapped to vertical).	Test
Inherit	The value of the Box-orient property should be inherited from the parent element.

Http://www.w3school.com.cn/cssref/pr_box-orient.asp