میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

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

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش چیدمان چند ستونی با CSS با من همراه باشید.

با استفاده از چیدمان چند ستونی در CSS، توسعه دهندگان می‌توانند یک چیدمان ستونی را تنها با کمی طراحی CSS در قسمت متن اعمال کنند. چیدمان چند ستون در CSS به صورت خودکار ریسپانسیو است. بنابراین، اغلب شما در لپ تاپ یا تبلت خود می‌توانید دو یا سه ستون داشته باشید، در حالی که یک دستگاه تلفن همراه ممکن است تنها یک ستون داشته باشد.

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

Capture 1

 


ویژگی های چند ستونی CSS

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

 


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

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

ویژگیChromeIEFirefoxSafariOpera
column-count50.010.052.09.037.0
column-gap50.010.052.09.037.0
column-rule50.010.052.09.037.0
column-rule-color50.010.052.09.037.0
column-rule-style50.010.052.09.037.0
column-rule-width50.010.052.09.037.0
column-span50.010.071.09.037.0
column-width50.010.052.09.037.0

ایجاد چندین ستون

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

مثال زیر متن را در عنصر <div> به ۳ ستون تقسیم می کند: 

مثال

div {
  column-count: ۳;
}

فاصله بین ستون ها

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

مثال زیر یک فاصله ۴۰ پیکسلی بین ستون ها را مشخص می کند:

مثال

div {
  column-gap: ۴۰px;
}

قوانین ستون CSS

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

مثال

div {
  column-rule-style: solid;
}

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

مثال

 

div {
  column-rule-width: ۱px;
}

 

column-rule-colorاین ویژگی رنگ خط بین ستون را مشخص می کند:

مثال

 

div {
  column-rule-color: lightblue;
}

این column-ruleویژگی یک ویژگی مختصر برای تنظیم تمام ویژگی های ستون-خط  در بالا است.

مثال زیر عرض ، استایل و رنگ خط را بین ستون ها تنظیم می کند:

مثال

 

div {
  column-rule: ۱px solid lightblue;
}

 


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

این column-spanویژگی مشخص می کند که یک ستون باید چند ستون در طول آن قرار بگیرد.

مثال زیر مشخص می کند که عنصر <h2> باید در تمام ستون ها قرار داشته باشد:

مثال

h2 {
  column-span: all;
}

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

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

مثال زیر مشخص می کند که عرض پیشنهادی و مطلوب برای ستون ها باید ۱۰۰ پیکسل باشد:

مثال

div {
  column-width: ۱۰۰px;
}

امیدواریم آموزش چیدمان چند ستونی با CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfچیدمان چند ستونی با CSSدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟