طرح چند ستونی CSS3 تعریف چند ستون متن ، درست همانند آنچه که در روزنامه هاست را آسان می کند
  • محمد انصاری
  • 1395/3/18
  • 0
  • 470

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

طرح چند ستونی CSS3 تعریف چند ستون متن ، درست همانند آنچه که در روزنامه هاست را آسان می کند:

 


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

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

 

خصوصیت

IE

Chrome

Firefox

Safari

Opera

column-count

10.0

4.0 –

Webkit-

2.0 –

Moz-

3.1  -

Webkit-

15.0-

Webkit-

11.1

column-gap

10.0

4.0 –

Webkit-

2.0 –

Moz-

3.1  -

Webkit-

15.0-

Webkit-

11.1

column-rule

10.0

4.0 –

Webkit-

2.0 –

Moz-

3.1  -

Webkit-

15.0-

Webkit-

11.1

column-rule-color

10.0

4.0 –

Webkit-

2.0 –

Moz-

3.1  -

Webkit-

15.0-

Webkit-

11.1

column-rule-style

10.0

4.0 –

Webkit-

2.0 –

Moz-

3.1  -

Webkit-

15.0-

Webkit-

11.1

column-rule-width

10.0

4.0 –

Webkit-

 

2.0 –

Moz-

3.1  -

Webkit-

15.0-

Webkit-

11.1

column-width

10

4.0 –

Webkit-

2.0 –

Moz-

3.1  -

Webkit-

15.0-

Webkit-

11.1

 


خصوصیات چند ستونی  CSS3

در این بخش شما با خصوصیات چند ستونی زیر آشنا می شوید:

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

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

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

مثال زیر متن داخل عنصر <div> را به سه قسمت تقسیم می کند:


مثال

div {
    -webkit-column-count3/* Chrome, Safari, Opera */
    -moz-column-count3; /* Firefox */
    column-count: 3;
}


مشخص کردن فاصله بین ستون ها

خصوصیت column-gap فاصله بین ستون ها را مشخص می کند.

مثال زیر 40 پیکسل بین ستون ها را مشخص می کند:


مثال

div {
    -webkit-column-gap40px/* Chrome, Safari, Opera */
    -moz-column-gap40px/* Firefox */
    column-gap40px;
}


قوانین ستون CSS3

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


مثال

div {
    -webkit-column-rule-stylesolid; /* Chrome, Safari, Opera */
    -moz-column-rule-stylesolid/* Firefox */
    column-rule-stylesolid;
}

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


مثال

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px/* Firefox */
    column-rule-width1px;
}

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


مثال

div {
    -webkit-column-rule-colorlightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue/* Firefox */
    column-rule-colorlightblue;
}

 

خصوصیت column-rule یک مختصرنویسی برای مقداردهی همه ی خصوصیات column-rule-* بالا است.

مثال زیر عرض، سبک و رنگ بین ستون ها را مقداردهی می کند:


مثال

div {
    -webkit-column-rule: 1px solid lightblue/* Chrome, Safari, Opera */
    -moz-column-rule1px solid lightblue/* Firefox */
    column-rule1px solid lightblue;
}


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

خصوصیت column-span مشخص می کند چند ستون یک عنصر در عرض باید پوشش داده شود.

مثال زیر مشخص می کند که عنصر <h2> باید در سرتاسر ستون ها گسترش پیدا کند:


مثال

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-spanall;
}


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

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

مثال زیر مشخص می کند که یک عرض بهینه پشینهادی برای ستون ها باید 100 پیکسل باشد


مثال

h2 {
    -webkit-column-width100px/* Chrome, Safari, Opera */
    column-width100px;
}


خصوصیات ستون های چندگانه CSS3

در جدول زیر لیست خصوصیات انتقال سه بعدی را مشاهده می کنید.

شرح

خصوصیت

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

column-count

چگونگی پر شدن ستون را مشخص می کند

column-fill

فاصله بین ستون ها را مشخص می کند

column-gap

یک مختصر نویسی برای مشخص کردن همه خصوصیات column-rule-* است

column-rule

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

column-rule-color

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

column-rule-style

 

محمد انصاری

من به عنوان طراح و برنامه نویس در شرکت توسن در حوزه ی بانکداری فعالیت می کنم. بیشتر زمانم رو به مطالعه پیرامون طراحی نرم افزار اختصاص میدم. همچنین علاقه ی زیادی به فعالیت های ورزشی دارم و زمان کافی به ورزش اختصاص می دهم.

نظرات0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربریایجاد حساب کاربری