آموزش CSS 3 > سایر خواص در CSS 3 > خاصیت box-orient
خاصیت box-orient :
خاصیت box-orient ، تعیین می کند که جهت چیدمان محتویات یک جدول یا جعبه ، افقی یا
عمودی باشد .
عناصر فرزند یک جعبه که به حالت افقی تنظیم شوند ، از چپ به راست و عناصر فرزند یک
جعبه که به حالت عمودی تنظیم شده اند ، از بالا به پایین نمایش داده می شوند .
اما خاصیت box-direction ، می تواند این تنظیم را بر
عکس نماید .
.
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
box-orient : horizontal | vertical | inherit;
|
خاصیت box-orient می تواند دارای یکی از 3 مقدار زیر باشد :
|
توضیح
|
در این حالت عناصر داخل جدول ، به صورت افقی چیده می شوند .
مقدار پیش فرض است .
|
|
در این حالت عناصر داخل جدول ، به صورت عمودی چیده می شوند .
|
|
در این حالت جعبه حالت چیدمان عناصر داخل خود را از عنصر مادر ( parent ) به ارث می
برد .
|
پشتیانی در مرورگر های مختلف :
اکثر مرورگر های مطرح به جز اکسپلورر از این خاصیت پشتیانی می کنند .
|
باید به صورت 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>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :