ستونهای CSS
- صفحه قبلی صفحات CSS
- صفحه بعدی رابط کاربری 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. |
- صفحه قبلی صفحات CSS
- صفحه بعدی رابط کاربری CSS