[css 实践篇] CSS box-orient

定义和用法

box-orient 属性规定框的子元素应该被水平或垂直排列。

提示：水平框中的子元素从左向右进行显示，而垂直框的子元素从上向下进行显示。不过，box-direction 和 box-ordinal-group 能够改变这种顺序。

默认情况下，HTML DOM元素沿着内联轴放置其内容。此CSS属性将仅适用于CSS display值为 box 或的HTML元素 inline-box

语法

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

值描述
horizontal 在水平行中从左向右排列子元素。
vertical 从上向下垂直排列子元素。
inline-axis 沿着行内轴来排列子元素（映射为 horizontal）。
block-axis 沿着块轴来排列子元素（映射为 vertical）。
inherit 应该从父元素继承 box-orient 属性的值。

 

 

 

 

 

实例：

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>CSS box-orient example</title>
 5     <style>
 6       div.example {
 7         display: -moz-box;                /* Mozilla */
 8         display: -webkit-box;             /* WebKit */
 9         display: box;                     /* As specified */
10 
11         /* Children should be oriented vertically */
12         -moz-box-orient: horizontal;      /* Mozilla */
13         -webkit-box-orient: horizontal;   /* WebKit */
14         box-orient: horizontal;           /* As specified */
15       }
16     </style>
17   </head>
18   <body>
19     <div class="example">
20       <p>I will be to the left of my sibling.</p>
21       <p>I will be to the right of my sibling.</p>
22     </div>
23   </body>
24 </html>
复制代码

效果

I will be to the left of my sibling.I will be to the left of my sibling.该box-orient

属性将导致p示例中的上述两个部分显示在同一行中

兼容

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (Yes)-webkit (Yes)-webkit (Yes)-moz[1] No support (Yes)-webkit 1.1-khtml
3.0-webkit		 







            

            
posted @ 
 
FannieGirl 
阅读(406) 
评论(1) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· Linux系列：如何用 C#调用 C方法造成内存泄露
    

· AI与.NET技术实操系列（二）：开始使用ML.NET
    

· 记一次.NET内存居高不下排查解决与启示
    

· 探究高空视频全景AR技术的实现原理
    

· 理解Rust引用及其生命周期标识（上）
    



    

    阅读排行：
    

 ·          阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
        

 ·          单线程的Redis速度为什么快？
        

 ·          SQL Server 2025 AI相关能力初探
        

 ·          展开说说关于C#中ORM框架的用法！
        

 ·          AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
        



    
    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示