CSS – ستونهای چندگانه (Multiple Columns)
طرح چند ستونه در CSS به شما این امکان را میدهد که به راحتی چند ستون از متن تعریف کنید، دقیقاً مثل چیزی که در روزنامهها مشاهده میشود:
<div class="newspaper">
<h2>Daily Ping</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
ویژگیهای چند ستونه در CSS
در این فصل، با ویژگیهای زیر برای ایجاد چند ستون آشنا خواهید شد:
column-count
: تعداد ستونهاcolumn-gap
: فاصله بین ستونهاcolumn-rule-style
: استایل خط بین ستونهاcolumn-rule-width
: عرض خط بین ستونهاcolumn-rule-color
: رنگ خط بین ستونهاcolumn-rule
: خلاصهای از تنظیمات خط بین ستونهاcolumn-span
: تعداد ستونهایی که یک عنصر باید در بر بگیردcolumn-width
: عرض پیشنهادی برای ستونها
پشتیبانی مرورگرها
ویژگیهای چند ستونه توسط مرورگرهای اصلی پشتیبانی میشوند. در جدول زیر، نسخه مرورگرهایی که اولین بار از این ویژگیها پشتیبانی کردند، آورده شده است:
ویژگی | Chrome | Firefox | Safari | Edge | Opera |
---|---|---|---|---|---|
column-count |
50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-gap |
50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule |
50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-color |
50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-style |
50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-rule-width |
50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
column-span |
50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
column-width |
50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
ایجاد چند ستون در CSS
ویژگی column-count
تعداد ستونهایی که باید عنصر به آنها تقسیم شود را مشخص میکند. در مثال زیر متن داخل یک عنصر <div>
به ۳ ستون تقسیم میشود:
div {
column-count: 3;
}
تنظیم فاصله بین ستونها
ویژگی column-gap
فاصله بین ستونها را تعیین میکند. مثال زیر فاصله 40 پیکسل بین ستونها را مشخص میکند:
div {
column-gap: 40px;
}
تنظیم خط بین ستونها
column-rule-style
: استایل خط بین ستونها را تعیین میکند.column-rule-width
: عرض خط بین ستونها را تنظیم میکند.column-rule-color
: رنگ خط بین ستونها را مشخص میکند.
div {
column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: lightblue;
}
یا میتوانید از ویژگی ترکیبی column-rule
برای تنظیم همه این ویژگیها با هم استفاده کنید:
div {
column-rule: 1px solid lightblue;
}
تنظیم تعداد ستونهایی که یک عنصر باید بپوشاند
ویژگی column-span
مشخص میکند که یک عنصر چند ستون را بپوشاند. مثال زیر مشخص میکند که عنصر <h2>
باید تمام ستونها را بپوشاند:
h2 {
column-span: all;
}
تنظیم عرض ستونها
ویژگی column-width
عرض پیشنهادی برای ستونها را تعیین میکند. مثال زیر عرض 100 پیکسل را برای ستونها پیشنهاد میکند:
div {
column-width: 100px;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام