چندین ستون CSS

طرح چند ستونی CSS

طرح چند ستونی CSS به ما اجازه می‌دهد تا به راحتی چند ستون متن را تعریف کنیم - مانند روزنامه‌ها:

داستان سه کشور

اولین فصل
شب شیرازی، قهرمانان بزرگ سه بر یک قرارداد بستند
سرنوشت قهرمانان یوپیون برای اولین بار موفق شدند

داستان بزرگترین وقایع جهانی، پس از مدتی به هم پیوسته و پس از مدتی به هم پاشیده می‌شود: در پایان دوره یو، هفت کشور در جدال بودند و به 秦‌پیوستند؛ پس از اینکه 秦‌پایان یافت، چین و هان در جدال بودند و دوباره به هان پیوستند؛ دوره هان از زمانی که امپراتور گائو از مار زنده برخاست و به قدرت رسید، همه جهان را یکپارچه کرد، بعداً در دوران بازگشت امپراتور گانگ، به امپراتور سینگ رسید و به سه کشور تقسیم شد. دلیل اصلی این اختلافات، از دوران امپراتور هوانگ و لیگ آغاز شد. امپراتور هوانگ، طبقه‌های خوب را محدود کرد و به بازرگانان خائن اعتماد کرد. پس از اینکه امپراتور هوانگ درگذشت، امپراتور لیگ به قدرت رسید، ژنرال سویو و معلم چان فان، به طور مشترک به او کمک کردند؛ در آن زمان بازرگانان خائن مانند تسو جیانگ به قدرت رسیدند، سویو و چان فان تصمیم به قتل آنها گرفتند، اما چون ماجرایشان مخفی نگه داشته نشد، به جای آن به آنها خسارت زدند و از آن زمان به بعد، بازرگانان خائن به شدت به قدرت رسیدند. در روز چهارم ماه آوریل سال جینینگ، امپراتور در قصر وندر ران نشست. وقتی که به صندلی نشست، باد تند و ناگهانی از گوشه‌ی قصر بلند شد، یک مار بزرگ سبز از سقف به پایین پرید و به صندلی چسبید. امپراتور به وحشت افتاد و به کمک مردم اطراف کشیده شد، همه مقامات به سرعت فرار کردند. پس از مدتی مار ناپدید شد. ناگهان توفان و باران شدید و برف به نیمه شب ادامه داشت و خانه‌های بی‌شمار آسیب دیدند. در سال جینینگ چهار، لویان زلزله زد؛ و دریاچه‌ها به سرعت پر از آب شدند، ساکنان ساحلی، همه توسط موج‌های بزرگ به دریا کشیده شدند. در سال گانگ و و، یک جوجه ماده به نر تبدیل شد. در اولین روز ماه ژوئن، ابرهای سیاه بیش از ده ذراع بلند شدند و به قصر وندر ران پریدند. در ماه ژوئیه، یک رنگین‌کمان در اردوگاه یو آمد، کوه‌های پنج‌گانه ساحل، همه شکستگی پیدا کردند. این همه ناپسندی، بیش از یک مورد بود. امپراتور فرمان داد که از مقامات درباره دلیل این بلایا سوال کنند، معلم تسو یانگ در یک نامه، گفت که این بلایا به دلیل دخالت زنان در سیاست بود، و سخنان او بسیار سخت و مستقیم بود. امپراتور پس از خواندن نامه، با تأسف برخاست. تسو جیانگ در پشت او نگاه کرد و همه چیز را به اطرافیانش اطلاع داد؛ سپس به دلیل یک موضوع دیگر تسو جیانگ را به اتهام متهم کرد و او را به خانه بازگرداند. بعداً تسو جیانگ، چانگ ژانگ، فانگ چونگ، جیانگ گوانگ، تسو جیانگ، هوائو لوان، جیانگ شو، جیانگ شاو، جیانگ یونگ، جیانگ شنگ، ده نفر به هم پیوستند و به خباثت پرداختند، به آنها

...... ......

ویژگی‌های چند ستونی CSS

...... ......

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

در این فصل، شما ویژگی‌های چند ستونی زیر را یاد خواهید گرفت:

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

ویژگی اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این ویژگی کامل پشتیبانی می‌کند. Chrome IE Firefox Safari
column-count 71.0 50.0 10.0 52.0 9.0
column-gap 71.0 50.0 10.0 52.0 9.0
column-rule 71.0 50.0 10.0 52.0 9.0
column-rule-color 71.0 50.0 10.0 52.0 9.0
column-rule-style 71.0 50.0 10.0 52.0 9.0
column-rule-width 71.0 50.0 10.0 52.0 9.0
column-span 71.0 50.0 Opera 52.0 9.0
column-width 71.0 50.0 10.0 52.0 9.0

37.0

column-count CSS ایجاد چند ستون

ویژگی تعداد ستون‌هایی که عنصر باید تقسیم شود را تعیین می‌کند.

مثال

div {
  در مثال زیر، متن در عناصر <div> به 3 ستون تقسیم شده است:
}

آزمایش کنید

column-count: 3;

column-gap CSS تعیین فضای بین ستون‌ها

ویژگی فضای بین ستون‌ها را تعیین می‌کند.

مثال

div {
  در مثال زیر، فضای بین ستون‌ها به 40 پیکسل تعیین شده است:
}

آزمایش کنید

column-gap: 40px;

column-rule-style ویژگی‌های قوانین ستون CSS

مثال

div {
  ویژگی سبک بین ستون‌ها را تعیین می‌کند:
}

آزمایش کنید

column-rule-width column-rule-style: solid;

مثال

div {
  ویژگی عرض بین ستون‌ها را تعیین می‌کند:
}

آزمایش کنید

column-rule-color column-rule-width: 1px;

مثال

div {
  ویژگی رنگ بین ستون‌ها را تعیین می‌کند:
}

آزمایش کنید

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

جدول زیر تمام ویژگی‌های چند ستونی را لیست می‌کند:

ویژگی وصف
column-count تعریف تعداد ستون‌هایی که عنصر باید تقسیم شود.
column-fill تعریف نحوه پر کردن ستون‌ها.
column-gap تعیین فضای بین ستون‌ها.
column-rule استفاده برای تنظیم属性 column-rule-* تمام.
column-rule-color تعریف رنگ بین ستون‌ها.
column-rule-style تعریف سبک بین ستون‌ها.
column-rule-width تعریف عرض بین ستون‌ها.
column-span تعیین تعداد ستون‌هایی که یک عنصر باید از آن عبور کند.
column-width پیشنهاد بهترین عرض برای ستون‌ها.
columns ویژگی‌های کوتاه برای تنظیم column-width و column-count.