خصوصیت columns
مثال (خصوصیت columns)
مشخص کردن ضخامت و تعداد ستون ها:
div
{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
خودتان امتحان کنید »
{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
مروگرهای Internet Explorer 10 و Opera خاصیت columns را پشتیبانی می کنند.
مرورگر Fitefox خاصیت جایگزین moz-columns- را پشتیبانی می کند.
مرورگرهای Safari و Chrome خاصیت جایگزین webkit-columns- را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت columns را پشتیبانی نمی کند.
تعریف و کاربرد
خاصیت columns فرم مختصر شده ای برای تنظیم خاصیت های column-width و column-count می باشد.
| مقدار پیشفرض | auto auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.columns="100px 3" |
نحوه استفاده
columns: column-width column-count;
| مقدار | توضیحات |
|---|---|
| column-width | ضخامت ستون ها را مشخص می کند. |
| column-count | تعداد ستون ها را مشخص می کند. |
مثال - خودتان امتحان کنید
متن داخل عنصر div را به سه ستون تقسیم می کند.
متن داخل عنصر div را به سه ستون تقسیم می کند که فاصله بین هر ستون با دیگری 30 پیکسل است.
عرض، استایل و رنگ خطی که بین هر دو ستون قرار دارد را مشخص می کند.
.
بیاموزهای مرتبط
CSS3 Multiple Column (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 9022
