با ویژگی column-count می توان در صفحه وب متن چند ستونی داشت مثل روزنامه 

 در این صفحه با سه ویژگی زیر اشنا می شوید

  • column-count
  • column-gap
  • column-rule
 مرورگرهایی که از این ویژگیها پشتیبانی می کنند

Internet Explorer Firefox Opera Google Chrome Safari

 IE هنوز از این ویژگیها پشتیبانی نمی کند

برای فایر فاکس پیشوند -moz- را به ابتدای ویژگیهای بالا اضافه کنید

برای کروم و سفاری پیشوند -webkit- را به ابتدای ویژگیهای بالا اضافه کنید

ویژگی column-count
 تعداد ستونهایی که می خواهید تگ مورد نظرتان به ان تعداد ستون بندی شود مشخص می کند

 مثال

تگ دایو را می خواهیم به 3 ستون تقسیم کنیم

 

 div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

 حالا اگر متن موجود در تگ div ما ، بیش از اندازه زیاد بود در ستونهای یک و  دو و سه قرار می گیرد
 مشاهده و اجرای برنامه کامل
ویژگی column-gap
 فاصله خالی بین ستونها را مشخص می کند

 مثال

برای تگ دایو ،فاصله 40 پیکسلی بین ستونها ایجاد کنید

 

 div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

 مشاهده و اجرای برنامه کامل
ویژگی column-rule
 با این ویژگی می توان ، ضخامت و سبک و رنگ خط واسط بین ستونها را مشخص کرد

 مثال

بین ستونهای متن موجود در تگ دایو ، خطی به ضخامت 3 پیکسل ، رنگ شماره ff00ff و نوع خط outset ایجاد نمائید

 

 div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

 مشاهده و اجرای برنامه کامل
 
  •  اگر بخواهید رنگ خط واسط را جداگانه تعیین کنید از ویژگی column-rule-color استفاده نمائید

 

مرورگرهای پشتیبانی کننده :

Internet Explorer Firefox Opera Google Chrome Safari


 مثال :

 

 div
{
-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
column-rule-color:#ff0000;
}

 مشاهده  عملی 
  •  اگر می خواهید سبک ( نوع ) خط بین ستونها را جداگانه مشخص نمائید از ویژگی زیر استفاده کنید :

column-rule-style

 

مرورگرهای پشتیبانی کننده :

Internet Explorer Firefox Opera Google Chrome Safari

 

 مثال

نوع خط واسط بین ستونها را نقطه چین  یعنی dotted تعیین کنید

 

 div
{
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
column-rule-style:dotted;
}

مشاهده و اجرای برنامه کامل
مشاهده عملی و اشنایی با انواع مدل خط
 
  •  در صورتیکه می خواهید ضخامت خط بین ستونها را جداگانه تغییر دهید از ویژگی زیر استفاده کنید

 

column-rule-width

مرورگرهای پشتیبانی کننده :

Internet Explorer Firefox Opera Google Chrome Safari

شما می توانید از مقادیر از قبل تعریف شده سی اس اس یا هر عدد دلخواه خودتان برای تعیین ضخامت خط ، استفاده کنید

 مثال

ضخامت خط بین ستونهای موجود در تگ دایو را 1 پیکسل کنید

 

div
{
-moz-column-rule-width:1px; /* Firefox */
-webkit-column-rule-width:1px; /* Safari and Chrome */
column-rule-width:1px;
}

 مشاهده و اجرای برنامه کامل
 مشاهده عملی و اشنایی با انواع مقادیر این ویژگی
ویژگی column-width
 عرض هر ستون را مشخص می کند

 مثال

عرض ستونهای متن موجود در  تگ div برابر 100 پیکسل شود

 

div
{
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
column-width:100px;
}

 مشاهده و اجرای برنامه کامل

 مرورگرهایی که از این ویژگی پشتیبانی می کنند :

Internet Explorer Firefox Opera Google Chrome Safari

 

به دور ش می توان مقدار این  ویژگی  را مشخص نمود :

  • روش اول : مقدار auto

auto  یعنی عرض ستونها بسته به اندازه مرورگر تنظیم شود

  • روش دوم : مقدار دلخواه برنامه نویس

یعنی عرض ستونها همان چیزی شود که شما مشخص کرده اید

 

 

مشاهده عملی
ویژگی column
 با این ویزگی می توان دو مورد عرض و تعداد ستونها را مشخص نمود
مرورگرهایی که از این ویژگی پشتیبانی می کنند :

Internet Explorer Firefox Opera Google Chrome Safari

 مثال

تگ دایو را به سه ستون با عرض 100 پیکسل تقسیم کنید

 

div
{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}

 مشاهده و اجرای برنامه کامل
 پارامتر اول عرض ستونها و پارامتر دوم ، تعداد ستونها ست