خصوصیت column-count
مثال (خصوصیت column-count)
تقسیم کردن متن مربوط به عنصر Div در سه ستون:
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت background را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.
توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.
خاصیت column-count توسط مرورگرهای Internet Explorer 10 و Opera پشتیبانی می شود.
مرور گر FireFox خاصیت جایگزین moz-column-count- را پشتیبانی می کند.
مرورگرهای Safari و Chrome، خاصیت جایگزین webkit-column-count- را پشتیبانی می کنند.
توجه: خاصیت column-count توسط Internet Explorer 9 و نسخه های قبل از آن پشتیبانی نمی شود.
تعریف و کاربرد
با استفاده از خاصیت column-count تعداد ستون هایی که یک عنصر باید به آن تعداد تقسیم شود را مشخص می کنیم.
| مقدار پیشفرض | auto |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.columnCount=3 |
نحوه استفاده
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| number | تعداد ستون های بهینه که محتوای عنصر در آن پخش می شود. | نمایش دادن » |
| auto |
"تعداد ستون هایی که توسط سایر خاصیت ها مانند "column-width" مشخص می شود. |
نمایش دادن » |
مثال - خودتان امتحان کنید
Column-gap
متن را به سه ستون تقسیم می کند و بین هر دو ستون 30 پیکسل شکاف ایجاد می کند.
Column-rule
طول، استایل و رنگ خط کش بین ستون ها را مشخص می کند.
بیاموزهای مرتبط
CSS3 Multiple Column (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 6848
