خصوصیت column-span
مثال (خصوصیت column-span)
عنصر h2 در تمام ستون ها محصور می شود:
h2
{
column-span:all;
-webkit-column-span:all; /* Safari and Chrome */
}
خودتان امتحان کنید »
{
column-span:all;
-webkit-column-span:all; /* Safari and Chrome */
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
مروگرهای Internet Explorer 10 و Opera خاصیت column-span را پشتیبانی می کنند.
مرورگرهای Safari و Chrome خاصیت جایگزین webkit-column-span- را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت column-column-span را پشتیبانی نمی کند.
تعریف و کاربرد
با استفاده از خاصیت column-span می توانیم مشخص کنیم که یک عنصر باید در چند ستون محصور و محدود شود.
| مقدار پیشفرض | 1 |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.columnSpan="all" |
نحوه استفاده
column-span: 1|all;
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| 1 | عنصر می بایست در یک ستون محصور شود. | نمایش دادن » |
| all | عنصر می بایست در تمام ستون ها محصور شود. | نمایش دادن » |
مثال - خودتان امتحان کنید
متن داخل عنصر div را به سه ستون تقسیم می کند.
متن داخل عنصر div را به سه ستون تقسیم می کند که فاصله بین هر ستون با دیگری 30 پیکسل است.
عرض، استایل و رنگ خطی که بین هر دو ستون قرار دارد را مشخص می کند.
بیاموزهای مرتبط
CSS3 Multiple Column (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 8010
