نوشتارهای چند ستونه در CSS

0
89
متن چند ستونی در css

متن چند ستونی در CSS

حتما دیده اید که بعضا در صفحات وب، نوشته هایشان را مانند روزنامه ها در چند ستون می نویسند. روش های مختلفی برای پیاده سازی چنین حالتی وجود دارد (استفاده از grid و …) اما دستور -column دستور اصلی و اختصاصی برای نوشتن متن چند ستونی در css است که به دستورات زیر تقسیم می شود:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

پشتیبانی از این دستورات به صورت زیر است:

خصوصیت کروم Edge فایرفاکس سافاری اپرا
column-count 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-gap 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule-color 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule-style 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule-width 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-span 50.0
4.0 -webkit-
10.0 پشتیبانی نمی شود 9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-width 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1

باید تک تک این دستورات را بررسی کنیم تا با آن ها آشنا شویم.

ایجاد ستون های چندگانه

دستور column-count تعداد ستون های ما را مشخص می کند. به طور مثال کد زیر متن داخل <div> را به سه ستون تقسیم می کند:

مشاهده ی خروجی در JSBin

نکته: این دستور و دیگر دستورات (طبق جدول بالا) در اینترنت اکسپلورر 9 و نسخه های قدیمی تر کار نمی کنند.

فاصله ی میان ستون ها

دستور column-gap فاصله ی میان ستون ها را مشخص می کند. مثال زیر بین ستون ها 40 پیکسل فاصله می گذارد:

مشاهده ی خروجی در JSBin

استایل ستون ها

شما می توانید با دستور column-rule-style خطی که ستون ها را از هم جدا می کند استایل دهی کنید. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

البته می توانید با استفاده از دستور column-rule-width عرض این خط جداکننده را نیز تعیین کنید:

مشاهده ی خروجی در JSBin

در صورت نیاز به تعیین رنگ این خط جدا کننده، باید از دستور column-rule-color استفاده کنید. ما این خط را در مثال زیر آبی کرده ایم:

مشاهده ی خروجی در JSBin

تمام دستورات بالا در یک دستور، یعنی دستور column-rule، خلاصه می شوند. ما در مثال زیر تمامی این دستورات را ادغام کرده ایم:

مشاهده ی خروجی در JSBin

تعیین حدود ستون ها

دستور column-span تعیین می کند که یک عنصر تا چند عنصر را در بر می گیرد. به طور مثال در کد زیر گفته ایم که <h2> باید روی تمام عناصر باشد (یعنی خودش داخل ستون قرار نگیرد اما بقیه ی مطالب در ستون ها پخش شوند):

مشاهده ی خروجی در JSBin

با حذف کردن دستور column-span از کد بالا و بازی با کد متوجه تفاوت خواهید شد.

تعیین عرض ستون ها

دستور column-width به شما اجازه می دهد عرض ستون هایتان را کنترل کنید. به طور مثال کد زیر می گوید که بهترین عرض برای ستون های من 100px است:

مشاهده ی خروجی در JSBin

ترتیبی که روکسو برای یادگیری مطالب سری CSS پیشرفته به شما توصیه می‌کند:

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید