چندین ستون 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