چیدمان چند ستونی CSS
طرح چند ستونی CSS امکان تعریف آسان چندین ستون از متن را فراهم می کند – درست مانند روزنامه ها:
چیدمان چند ستونی CSS
طرح چند ستونی CSS امکان تعریف آسان چندین ستون از متن را فراهم می کند – درست مانند روزنامه ها:
CSS ایجاد چندین ستون
column-countاموال تعداد ستون ها یک عنصر باید به تقسیم مشخص می کند.
مثال زیر متن را در عنصر <div> به 3 ستون تقسیم می کند:
مثال
div {
column-count: 3;
}
CSS فاصله بین ستون ها را مشخص کنید
column-gapاموال فاصله بین ستون ها مشخص می کند.
مثال زیر یک فاصله 40 پیکسلی بین ستون ها را مشخص می کند:
مثال
div {
column-gap: 40px;
}
قوانین ستون CSS
این column-rule-styleویژگی سبک قانون بین ستون ها را مشخص می کند:
مثال
div {
column-rule-style: solid;
}
column-rule-widthاموال عرض حکومت بین ستون مشخص می کند:
مثال
div {
column-rule-width: 1px;
}
column-rule-colorاموال رنگ از حکومت بین ستون مشخص می کند:
مثال
div {
column-rule-color: lightblue;
}
این column-ruleویژگی یک ویژگی مختصر برای تنظیم تمام ویژگی های ستون-قانون- * در بالا است.
مثال زیر عرض ، سبک و رنگ قانون را بین ستون ها تنظیم می کند:
مثال
div {
column-rule: 1px solid lightblue;
}
مشخص کنید که یک عنصر باید چند ستون داشته باشد
این column-spanویژگی مشخص می کند که یک ستون باید چند ستون در طول آن قرار بگیرد.
مثال زیر مشخص می کند که عنصر <h2> باید در تمام ستون ها قرار داشته باشد:
مثال
h2 {
column-span: all;
}
عرض ستون را مشخص کنید
column-widthمالکیت پیشنهاد، عرض مطلوب برای ستون مشخص می کند.
مثال زیر مشخص می کند که عرض پیشنهادی و مطلوب برای ستون ها باید 100 پیکسل باشد:
