٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش چند ستون CSS

چیدمان چند ستونی CSS طرح چند ستونی CSS امکان تعریف آسان چندین ستون از متن را فراهم می کند – درست مانند روزنامه ها: چیدمان چند ستونی CSS طرح چند ستونی CSS امکان تعریف آسان چندین ستون از متن را…

محمد یوسفی

13 جولای 2021

چیدمان چند ستونی 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 پیکسل باشد:

مثال

div {
  column-width: 100px;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها