سبد (0)

خصوصیت column-count

مثال (خصوصیت column-count)

تقسیم کردن متن مربوط به عنصر Div در سه ستون:

div
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}
خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.


پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت 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

نحوه استفاده

column-count: number|auto;
مقدار توضیحات نمایش دادن
number تعداد ستون های بهینه که محتوای عنصر در آن پخش می شود. نمایش دادن »
auto

"تعداد ستون هایی که توسط سایر خاصیت ها مانند "column-width" مشخص می شود.

نمایش دادن »

مثالs

مثال - خودتان امتحان کنید

Column-gap
 متن را به سه ستون تقسیم می کند و بین هر دو ستون 30 پیکسل شکاف ایجاد می کند.

Column-rule
 طول، استایل و رنگ خط کش بین ستون ها را مشخص می کند.


بیاموزهای مرتبط

CSS3 Multiple Column (بیاموز CSS3)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه