首頁 > 開發者 > 網站開發

[css 實踐篇] CSS box-orient

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：html元素   div   amp   web   block   display   round   導致   vertica   

定義和用法

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樣本中的上述兩個部分顯示在同一行中
相容
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes)-webkit (Yes)-webkit (Yes)-moz[1] No support (Yes)-webkit 1.1-khtml
3.0-webkit		 


[css 實踐篇] CSS box-orient

                

                    
本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

                

            


                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
聯繫我們

            
該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

            

                如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至：
                info-contact@alibabacloud.com
                進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。
            

            



                

                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •