چندستونی در CSS

چیدمان چند ستون CSS

طرح بندی چند ستون CSS اجازه می دهد تا تعریف آسان از چند ستون متن - درست مثل روزنامه ها  ایحاد شود.

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

اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از این ویژگی پشتیبانی می کند.
اعداد که به دنبال آن -webkit- یا -moz- اولین نسخه که با یک پیشوند کار کرد را مشخص کنید.

ویژگی
column-count
50.0
4.0 -webkit-
10.0
52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-gap
50.0
4.0 -webkit-
10.0
52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule
50.0
4.0 -webkit-
10.0
52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule-color
50.0
4.0 -webkit-
10.0
52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-rule-style
50.0
4.0 -webkit-
10.0
52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-rule-width
50.0
4.0 -webkit-
10.0
52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-span
50.0
4.0 -webkit-
10.0
Not supported
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-width
50.0
4.0 -webkit-
10.0
52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1

خاصیت چند ستون در CSS

در این فصل در مورد خواص چند ستون یاد خواهید گرفت:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

ایجاد چند ستون در 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 یک ویژگی مختصر برای تنظیم تمام خواص column-rule-*  است.مثال زیر عرض، سبک و رنگ قاعده بین ستون را تعیین می کند:

خط بین ستون
div {
    column-rule: 1px solid lightblue;
}
مشاهده مثال

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

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

قرار گرفتن چند ستون در عنصر
h2 {
    column-span: all;
}
مشاهده مثال

مشخص کردن عرض ستون

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

عرض ستون
div {
    column-width: 100px;
}
مشاهده مثال

نظر شما

یادگیری CSS یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز