تبلیغات متنی و بنر

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

خاصیت box-direction :

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

 

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

Syntax box-direction : normal | reverse | inherit ;

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

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

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

   

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

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

مثال :

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

                <!DOCTYPE html>
<html>
<head>
    <title>مثال box-direction</title>
    <script type="text/javascript">
	<!--
        function playit_onload() {
            var preval = ""
            preval = document.getElementById("preselectedValue").value
            if (preval != "") {
                change_position(preval)
                var x = document.getElementsByTagName("input")
                var l = x.length
                for (i = 0; i < l; i++) {
                    if (x[i].value == preval) {
                        x[i].checked = true
                    }
                }
                document.getElementById("playitcontainer").style.display = "block";
            }
        }

        function click_position(obj) {
            change_position(obj.value)
            displayad()
        }

        function change_position(val) {

            var s = "demoDIV"

            s = "myDIV"

            document.getElementById(s).style.boxDirection = val;

            document.getElementById(s).style.WebkitBoxDirection = val;

            document.getElementById(s).style.MozBoxDirection = val;

            var x = "box-direction:<span id='enlargecssprop'>" + val + "</span>"
            var y = "#myDIV<br>	{<br>	display:box;<br>	###CSSPROP###;<br>	}<br>"
            var z = y.replace("###CSSPROP###", x)

            document.getElementById("styleDIV").innerHTML = z

        }

    

	
    </script>
    <style>
        #demoDIV
        {
            margin-left: 10px;
            margin-top: 3px;
            background-color: #ffffff;
            border: 1px solid #c3c3c3;
            height: 280px;
            width: 430px;
        }
        
        #myDIV
        {
            display: box;
            box-direction: normal;
        }
        
        
        
        
        
        #myDIV
        {
            display: -webkit-box;
            -webkit-box-direction: normal;
            display: -moz-box;
            -moz-box-direction: normal;
        }
    </style>
</head>
<body>
    <div style="width: 450px; float: left;">
        <div class="demoHeader">
            CSS Property:</div>
        <div style="font-size: 14px; margin: 10px; font-weight: bold;">
            box-direction:</div>
        <form style="margin: 15px;" action="javascript:return false;">
        <input type="hidden" id="preselectedValue" value="" />
        <div>
            <input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)"
                id="value_1" value="normal" checked='checked' /><label for="value_1">normal</label></div>
        <div>
            <input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)"
                id="value_2" value="reverse" /><label for="value_2">reverse</label></div>
        </form>
    </div>
    <div style="width: 450px; float: left;">
        <div id="demoParent">
            <div id="demoDIV">
                <div id="myDIV">
                    <div style="background: red; width: 50px; height: 50px;">
                        Box 1</div>
                    <div style="background: blue; width: 100px; height: 100px;">
                        Box 2</div>
                    <div style="background: yellow; width: 200px; height: 200px;">
                        Box 3</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
خروجی

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

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

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

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟