آموزش CSS 3 > سایر خواص در CSS 3 > خاصیت box-orient

خاصیت box-orient :

خاصیت box-orient ، تعیین می کند که جهت چیدمان محتویات یک جدول یا جعبه ، افقی یا عمودی باشد .
عناصر فرزند یک جعبه که به حالت افقی تنظیم شوند ، از چپ به راست و عناصر فرزند یک جعبه که به حالت عمودی تنظیم شده اند ، از بالا به پایین نمایش داده می شوند .
اما خاصیت box-direction ، می تواند این تنظیم را بر عکس نماید .

.

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax box-orient : horizontal | vertical | inherit;

خاصیت  box-orient می تواند دارای یکی از  3  مقدار زیر باشد :

box-orient  موارد مختلف خاصیت
توضیح مقدار
در این حالت عناصر داخل جدول ، به صورت افقی چیده می شوند .
مقدار پیش فرض است .
horizontal
در این حالت عناصر داخل جدول ، به صورت عمودی چیده می شوند . vertical
در این حالت جعبه حالت چیدمان عناصر داخل خود را از عنصر مادر ( parent ) به ارث می برد . inherit

پشتیانی در مرورگر های مختلف :

   

اکثر مرورگر های مطرح به جز اکسپلورر از این خاصیت پشتیانی می کنند .

کد لازم برای پشتیانی نوع مرورگر
باید به صورت moz-box-orient- نوشته شود .
باید به صورت webkit-box-orient- نوشته شود .
پشتیانی نمی شود .
باید به صورت webkit-box-orient- نوشته شود .

مثال :

در مثال زیر هر سه حالت نمایش محتویات در یک جعبه را نمایش داده ایم :

< html >
  < head >
    < style >
       .box
           {
               display:-moz-box;
               display:-webkit-box;
               display:box;
               width:200px;
               height:100px;
               border:2px solid red;
            }
    < /style >


    <script>
              function ChangeBoxOrient(x) {
                    // Returns the selected option's text
                    var boxOrient = x.options[x.selectedIndex].text;
                     var div = document.getElementById("myDiv");
                    if (div.style.MozBoxOrient !== undefined)
                            {
                                        div.style.MozBoxOrient= BoxOrient;
                               }
                   else if (div.style.webkitBoxOrient !== undefined)
                              {
                                         div.style.webkitBoxOrient = BoxOrient;
                              }
                   else
                            {
                                        alert("Your browser doesn't support this example!");
                             }
                           }
    </script>

  </head>
<body>
       <div class="box" id="myDiv">
            <div style="background: red; width: 50px; height: 50px;"> Box 1</div>
            <div style="background: lightblue; width: 50px; height: 50px;"> Box 2</div>
            <div style="background: yellow; width: 50px; height: 50px;"> Box 3</div>
       </div>
       <select onchange="ChangeBoxOrient (this);" size="6">
               <option selected ="selected" />horizental
               <option />vertical
               <option />inherit
        </select>

</body>
</html>
کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟