免費(fèi)AI編程助手
CSS3 box-orient 屬性
實(shí)例
指定div元素的子元素橫向排列：
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;
}
嘗試一下 ?
瀏覽器支持
目前所有主流瀏覽器都不支持box-orient屬性。
Firefox通過(guò)私有屬性- MOZ-box-orient支持。
Safari, Opera, 和 Chrome通過(guò)私有屬性 -webkit-box-orient 支持.
屬性定義及使用說(shuō)明
box-orient 屬性指定一個(gè)box子元素是否應(yīng)按水平或垂直排列。
Tip: 水平方向的box里的子元素是由左到右顯示，垂直方向的box顯示從上到下排列。然而，box-direction方向可由 box-ordinal-group屬性改變這個(gè)順序。
| 默認(rèn)值: | inline-axis |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語(yǔ)法: | object.style.boxOrient="vertical" |
語(yǔ)法
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;| 值 | 說(shuō)明 |
|---|---|
| horizontal | 指定子元素在一個(gè)水平線上從左至右排列 |
| vertical | 從頂部向底部垂直布置子元素 |
| inline-axis | 子元素沿著內(nèi)聯(lián)坐標(biāo)軸（映射到橫向） |
| block-axis | 子元素沿著塊坐標(biāo)軸（映射到垂直） |
| inherit | box-orient 屬性的值應(yīng)該從父元素繼承 |
更多建議：