خانه / طراحی وب / چیدمان چندین ستون در CSS3

چیدمان چندین ستون در CSS3

طرحبندی CSS3 اجازه می دهد که به راحتی چندین ستون از عناصر در یک صفحه از وب سایت تان داشته باشید، درست مثل چندین ستون متنی در روزنامه.

ویژگی های چند ستونی در CSS3

 در این پست با این خواص مربوط به چند ستونی در CSS3 آشنا خواهید شد:

 column-count

► column-gap

► column-rule-style

► column-rule-width

► column-rule-color

► column-rule

 ►column-width

column-span►

چگونگی ایجاد چند ستون در CSS3

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

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

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

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

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

مثال زیر شکافی به اندازه 40 پیکسل بین ستونهای عنصر ایجاد میکند (ستونها به اندازه 40 پیکسل از هم فاصله خواهند داشت):

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

قوانین ستون CSS3

خاصیت 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 عرض پیشنهاد شده و بهینه برای ستون را تعیین می نماید.

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

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

 

درباره‌ی علیزاده

همچنین ببینید

فیلم آموزش jQuery

فیلم آموزش jQuery قسمت 3

در قسمت سوم از سری فیلم آموزش jQuery به بررسی نحوه ساخت یک افکت انیمیشنی در …

1 Star2 Stars3 Stars4 Stars5 Stars (امتیازی داده نشده است)
Loading...

پاسخی بگذارید

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

ایمیلتان را وارد کنید تا همین الان این آموزش ارزشمند را دریافت کنید
 HTML 5 دوره آنلاین  
برایم ایمیل شود
نگران نباشید ، ایمیل های مزاحم نمی فرستیم
close-link
ایمیلتان را وارد کنید تا همین الان این آموزش ارزشمند را دریافت کنید
 چهار فیلم آموزشی  
برایم ایمیل شود
نگران نباشید ، ایمیل های مزاحم نمی فرستیم
close-link