css3 :چند ستونه کردن متن (مانند روزنامه)

multi-column درcss3  این امکان را می دهد که به سادگی یک متن را به چند ستون تقسم بندی کنید ( مانند روزنامه )

ویژگیهای  multi-column :

column-count

column-gap

column-rule-style

column-rule-width

column-rule-color

column-rule

column-span

column-width

column-count : مشخص می کند که یک عنصر به چند ستون تقسیم شود. در مثال زیر عنصر div به 3 ستون تقصیم می شود:

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

 

column-gap : مشخص کننده فاصله بین ستون ها است:

 

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

 

column-rule-style : به منظور خط کشی بین ستونها به کار می رود:

 

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

column-rule-width : این ویژگی عرض هر کدام از خط کشیها را مشخص می کند:

 

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

column-rule-color : رنگ خط کشیها را مشخص می کند:

 

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

column-rule : این ویژگی به تنهایی برای خط کشی و تعیین رنگ و عرض هر خط کشی بین ستون ها کاربرد دارد :

 

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

column-span : در مثال زیر مشخص می کند <h2> چه تعداد ستون را می تواند در بر بگیرد :

این ویژگی در فایرفاکس و اکسپلولر کار نمی کند

 

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

column-width : برای بهینه سازی عرض هر ستون به کار می رود و برای ایجاد ستونهای ریسپانسیو مناسب است:

 

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

 

در لینک زیر می توانید یک مثال جامع از این ویژگیها را مشاهده کنید.


نمایش نتیجه کد
تمام حقوق مادی و معنوی این ساین متعلق به mojtaba khodadadi میباشد
  
2016 - 2020