آموزش CSS - ستون‌های چندگانه

css 3 امکان استفاده از ستون‌های چندگانه (Multi Columns) را برای چینش متن به صورت ساختار روزنامه‌ای فراهم کرده است.

برخی از مشخصات پرکاربرد ستون‌های چندگانه در زیر نشان داده شده‌اند:

ردیف	مقدار و توضیحات
۱	تعداد ستون‌ها (column-count) برای تقسیم المان به تعداد ستون‌های مشخص استفاده می‌شود.
۲	پر کردن ستون‌ها (column-fill) برای تصمیم‌گیری درباره پر کردن ستون‌ها استفاده می‌شود.
۳	فاصله بین ستون‌ها (column-gap) برای تعیین فاصله بین ستون‌ها استفاده می‌شود.
۴	قانون ستون (column-rule) برای تعیین تعداد قوانین استفاده می‌شود.
۵	رنگ قانون (rule-color) برای تعیین رنگ قانون ستون استفاده می‌شود.
۶	سبک قانون (rule-style) برای تعیین سبک قانون ستون استفاده می‌شود.
۷	عرض قانون (rule-width) برای تعیین عرض قانون ستون استفاده می‌شود.
۸	طول ستون (column-span) برای تعیین فاصله بین ستون‌ها استفاده می‌شود.

نمونه

در زیر نمونه ای از چیدمان متن به عنوان ساختار روزنامه نمایش داده شده است.

<html>
   <head>
      <style>
         .multi {
            /* Column count property */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            
            /* Column gap property */
            -webkit-column-gap: 40px; 
            -moz-column-gap: 40px; 
            column-gap: 40px;
            
            /* Column style property */
            -webkit-column-rule-style: solid; 
            -moz-column-rule-style: solid; 
            column-rule-style: solid;
         }
      </style>
   </head>

   <body>
   
      <div class = "multi">
        tut24 از این ایده سرچشمه می گیرد که یک کلاس وجود دارد
         از خوانندگانی که بهتر به محتوای آنلاین پاسخ می دهند و ترجیح می دهند یاد بگیرند
         مهارت‌های جدید با سرعت خاص خود از اتاق‌های نشیمنشان.
         این سفر با یک آموزش واحد در HTML با لذت آغاز شد
         با پاسخی که ایجاد کرد، ما راه خود را برای اضافه کردن آموزش‌های تازه کار کردیم
         به مخزن ما که اکنون با افتخار تعداد زیادی آموزش و
         مقالات مرتبط با موضوعات مختلف از زبان های برنامه نویسی گرفته تا وب
         طراحی برای دانشگاهیان و خیلی چیزهای دیگر.
      </div>
      
   </body>
</html>

فرض کنید، اگر کاربر بخواهد متنی را بدون خط به عنوان کاغذ جدید بسازد، می‌توانیم این کار را با حذف نحو استایل مانند شکل زیر انجام دهیم.

.multi {
   /* Column count property */
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
   
   /* Column gap property */
   -webkit-column-gap: 40px; 
   -moz-column-gap: 40px; 
   column-gap: 40px;
}

* تبریک میگم شما درس ستون‌های چندگانه را با موفقیت مطالعه کردید و به پایان رساندید ،حالا پیش به سوی درس بعدی و یادگیر بیشتر...

انیمیشن - درس قبلی

درس بعدی - واسط کاربری