آموزش طرح های چند ستونه در CSS3

با CSS3 می توانید محتوای متنی یک عنصر را در چند ستون تقسیم کنید.

ایجاد طرح های چند ستونه

CSS3 اجزای طرح بندی چند ستونه را برای ایجاد چند لایه ستون با روشی آسان و کارآمد معرفی کرده است. اکنون می توانید بدون استفاده از جعبه های شناور، طرح هایی مانند آنچه در مجلات و روزنامه ها می بینید، ایجاد کنید. در اینجا یک مثال ساده از تقسیم متن در سه ستون با استفاده از ویژگی طرح چند ستونه در CSS3 ارائه شده است.

مثال

p {

-webkit-column-count: 3; /* کروم، سافاری، اپرا */

-moz-column-count: 3; /* فایرفاکس */

column-count: 3; /* ساختار استاندارد */

}

تنظیم تعداد ستون یا عرض

ویژگی هایcolumn-count  وcolumn-width  در CSS کنترل می کنند که آیا و چند ستون نمایش داده شود. ویژگی column-count تعداد ستون ها را در داخل عنصر چند ستونه تنظیم می کند، در حالی که ویژگی column-width ، عرض مورد نظر را برای ستون ها تعیین می کند.

مثال

p {

-webkit-column-width: 150px; /* کروم، سافاری، اپرا */

-moz-column-width: 150px; /* فایرفاکس */

column-width: 150px; /* ساختار استاندارد */

}

توجه: ویژگی column-width، عرض بهینه ستون را تعیین می کند. اگرچه، ممکن است با توجه به فضای موجود، عرض ستون پهن تر یا باریک تر باشد. این ویژگی نباید با ویژگیcolumn-count  استفاده شود.

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

با استفاده از ویژگی column-gap، می توانید فاصله بین ستون ها را کنترل کنید. بین هر ستون فاصله یکسانی اعمال می شود. فاصله پیش فرض طبیعی معادل em1 است.

مثال

p {

/* کروم، سافاری، اپرا */

-webkit-column-count: 3;

-webkit-column-gap: 100px;

/* فایرفاکس */

-moz-column-count: 3;

-moz-column-gap: 100px;

/* ساختار استاندارد */

column-count: 3;

column-gap: 100px;

}

تنظیم قوانین ستون

همچنین می توان با استفاده از ویژگی column-rule، بین ستون ها خط اضافه کنید. یک ویژگی کوتاه شده برای تنظیم عرض، سبک و رنگ خط در یک اعلان واحد است. ویژگی column-rule همان مقادیر حاشیه و خط بیرونی را می گیرد.

مثال

p {

/* کروم، سافاری، اپرا */

-webkit-column-count: 3;

-webkit-column-gap: 100px;

-webkit-column-rule: 2px solid red;

/* فایرفاکس */

-moz-column-count: 3;

-moz-column-gap: 100px;

-moz-column-rule: 2px solid red;

/* ساختار استاندارد */

column-count: 3;

column-gap: 100px;

column-rule: 2px solid red;

}

توجه: عرض تعیین شده در ویژگی column-rule روی عرض جعبه های ستون تاثیری ندارد، اما اگر عرض در این ویژگی از فاصله بین ستونی بزرگتر شود، جعبه های ستون مجاور با یکدیگر تداخل پیدا می کنند.

ویژگی های ستون های چندگانه در CSS3

در جدول زیر همه ویژگی های ستون های چندگانه به صورت مختصر ارائه شده است:

توضیحات ویژگی
تعداد ستون ها را داخل یک عنصر چند ستونه مشخص می کند. column-count
نحوه پخش مطالب را در ستون ها مشخص می کند. column-fill
فاصله بین ستون ها را مشخص می کند. column-gap
یک خط یا خط کش صاف بین هر ستون ترسیم می کند. column-rule
رنگ خط را بین ستون ها مشخص می کند. column-rule-color
سبک خط را بین ستون ها مشخص می کند. column-rule-style
اندازه عرض خط را بین ستون ها مشخص می کند. column-rule-width
مشخص می کند که یک عنصر چند ستون را از عرض کل ستون ها پوشش دهد. column-span
عرض بهینه ستون ها را مشخص می کند. column-width
یک ویژگی کوتاه شده که برای تنظیم همزمان ویژگی های عرض و تعداد ستون ها استفاده می شود. columns
بیشتر بخوانید :   ویژگی های ابزار سئو مجستیک