چندستونی در CSS

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

طرح بندی چند ستون CSS اجازه می دهد تا تعریف آسان از چند ستون متن - درست مثل روزنامه ها  ایحاد شود.

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

اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از این ویژگی پشتیبانی می کند.
اعداد که به دنبال آن -webkit- یا -moz- اولین نسخه که با یک پیشوند کار کرد را مشخص کنید.

ویژگی
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
Not supported
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

خاصیت چند ستون در CSS

در این فصل در مورد خواص چند ستون یاد خواهید گرفت:

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

ایجاد چند ستون در CSS

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

ایجاد چند ستون
div {
    column-count: 3;
}
مشاهده مثال

تعیین فاصله بین ستون ها در CSS

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

فاصله بین ستون
div {
    column-gap: 40px;
}
مشاهده مثال

خطوط بین ستون CSS

ویژگی  column-rule-style  سبک بین ستون را مشخص می کند:

خط بین ستون
div {
    column-rule-style: solid;
}
مشاهده مثال

ویژگی  column-rule-width عرض پهنای بین ستون را مشخص می کند:

عرض خط بین ستون
div {
    column-rule-width: 1px;
}
مشاهده مثال

ویژگی  column-rule-color رنگ خطوط بین ستون را مشخص می کند:

رنگ خط بین ستون
div {
    column-rule-color: lightblue;
}
مشاهده مثال

ویژگی  column-rule یک ویژگی مختصر برای تنظیم تمام خواص column-rule-*  است.مثال زیر عرض، سبک و رنگ قاعده بین ستون را تعیین می کند:

خط بین ستون
div {
    column-rule: 1px solid lightblue;
}
مشاهده مثال

مشخص کنید که چند ستون درعنصری باید قرار داشته باشد

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

قرار گرفتن چند ستون در عنصر
h2 {
    column-span: all;
}
مشاهده مثال

مشخص کردن عرض ستون

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

عرض ستون
div {
    column-width: 100px;
}
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط