ستون‌های 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.