CSS3 box-orient property
Examples
Specified div element child elements arranged laterally:
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;
/ * W3C * /
display: box;
box-orient: horizontal;
}
{
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;
/ * W3C * /
display: box;
box-orient: horizontal;
}
try it"
Browser Support
At present, all major browsers do not support box-orient property.
Firefox by private property - MOZ-box-orient support.
Safari, Opera, and Chrome through private property -webkit-box-orient support.
Attribute definitions and instructions
box-orient property specifies whether a box should be child elements horizontally or vertically.
Tip: box in the sub-elements in the horizontal direction is displayed from left to right, box displayed vertically from top to bottom.However, Box-direction orientation may be box-ordinal-group property to change this order.
Defaults: | inline-axis |
---|---|
inherit: | no |
version: | CSS3 |
JavaScript syntax: | object .style.boxOrient = "vertical" |
grammar
box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
value | Explanation |
---|---|
horizontal | Specified sub-elements are arranged in a horizontal line from left to right |
vertical | From top to bottom of the vertical arrangement of sub-elements |
inline-axis | Inline child elements along the axis (mapped to landscape) |
block-axis | Sub-block elements along the axis (mapped to the vertical) |
inherit | Value box-orient property should be inherited from the parent element |