حتما دیده اید که بعضا در صفحات وب، نوشته هایشان را مانند روزنامه ها در چند ستون می نویسند. روش های مختلفی برای پیاده سازی چنین حالتی وجود دارد (استفاده از grid و …) اما دستور -column دستور اصلی و اختصاصی برای نوشتن متن چند ستونی در css است که به دستورات زیر تقسیم می شود:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
پشتیبانی از این دستورات به صورت زیر است:
| خصوصیت |
کروم |
Edge |
فایرفاکس |
سافاری |
اپرا |
| 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 |
پشتیبانی نمی شود |
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 |
باید تک تک این دستورات را بررسی کنیم تا با آن ها آشنا شویم.
ایجاد ستون های چندگانه
دستور column-count تعداد ستون های ما را مشخص می کند. به طور مثال کد زیر متن داخل <div> را به سه ستون تقسیم می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:3;/* Chrome, Safari, Opera */
-moz-column-count:3;/* Firefox */
column-count:3;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer9,andearlier versions,does notsupport the column-count property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: این دستور و دیگر دستورات (طبق جدول بالا) در اینترنت اکسپلورر 9 و نسخه های قدیمی تر کار نمی کنند.
فاصله ی میان ستون ها
دستور column-gap فاصله ی میان ستون ها را مشخص می کند. مثال زیر بین ستون ها 40 پیکسل فاصله می گذارد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:3;/* Chrome, Safari, Opera */
-moz-column-count:3;/* Firefox */
column-count:3;
-webkit-column-gap:40px;/* Chrome, Safari, Opera */
-moz-column-gap:40px;/* Firefox */
column-gap:40px;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer9,andearlier versions,does notsupport the column-gap property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
استایل ستون ها
شما می توانید با دستور column-rule-style خطی که ستون ها را از هم جدا می کند استایل دهی کنید. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:3;/* Chrome, Safari, Opera */
-moz-column-count:3;/* Firefox */
column-count:3;
-webkit-column-gap:40px;/* Chrome, Safari, Opera */
-moz-column-gap:40px;/* Firefox */
column-gap:40px;
-webkit-column-rule-style:solid;/* Chrome, Safari, Opera */
-moz-column-rule-style:solid;/* Firefox */
column-rule-style:solid;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer9,andearlier versions,does notsupport the column-rule-style property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته می توانید با استفاده از دستور column-rule-width عرض این خط جداکننده را نیز تعیین کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:3;/* Chrome, Safari, Opera */
-moz-column-count:3;/* Firefox */
column-count:3;
-webkit-column-gap:40px;/* Chrome, Safari, Opera */
-moz-column-gap:40px;/* Firefox */
column-gap:40px;
-webkit-column-rule-style:solid;/* Chrome, Safari, Opera */
-moz-column-rule-style:solid;/* Firefox */
column-rule-style:solid;
-webkit-column-rule-width:1px;/* Chrome, Safari, Opera */
-moz-column-rule-width:1px;/* Firefox */
column-rule-width:1px;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer9,andearlier versions,does notsupport the column-rule-width property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در صورت نیاز به تعیین رنگ این خط جدا کننده، باید از دستور column-rule-color استفاده کنید. ما این خط را در مثال زیر آبی کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:3;/* Chrome, Safari, Opera */
-moz-column-count:3;/* Firefox */
column-count:3;
-webkit-column-gap:40px;/* Chrome, Safari, Opera */
-moz-column-gap:40px;/* Firefox */
column-gap:40px;
-webkit-column-rule-style:solid;/* Chrome, Safari, Opera */
-moz-column-rule-style:solid;/* Firefox */
column-rule-style:solid;
-webkit-column-rule-width:1px;/* Chrome, Safari, Opera */
-moz-column-rule-width:1px;/* Firefox */
column-rule-width:1px;
-webkit-column-rule-color:lightblue;/* Chrome, Safari, Opera */
-moz-column-rule-color:lightblue;/* Firefox */
column-rule-color:lightblue;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer9,andearlier versions,does notsupport the column-rule-color property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تمام دستورات بالا در یک دستور، یعنی دستور column-rule، خلاصه می شوند. ما در مثال زیر تمامی این دستورات را ادغام کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:3;/* Chrome, Safari, Opera */
-moz-column-count:3;/* Firefox */
column-count:3;
-webkit-column-gap:40px;/* Chrome, Safari, Opera */
-moz-column-gap:40px;/* Firefox */
column-gap:40px;
-webkit-column-rule:1pxsolidlightblue;/* Chrome, Safari, Opera */
-moz-column-rule:1pxsolidlightblue;/* Firefox */
column-rule:1pxsolidlightblue;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer9,andearlier versions,does notsupport the column-rule property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تعیین حدود ستون ها
دستور column-span تعیین می کند که یک عنصر تا چند عنصر را در بر می گیرد. به طور مثال در کد زیر گفته ایم که <h2> باید روی تمام عناصر باشد (یعنی خودش داخل ستون قرار نگیرد اما بقیه ی مطالب در ستون ها پخش شوند):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:3;/* Chrome, Safari, Opera */
-moz-column-count:3;/* Firefox */
column-count:3;
-webkit-column-gap:40px;/* Chrome, Safari, Opera */
-moz-column-gap:40px;/* Firefox */
column-gap:40px;
-webkit-column-rule:1pxsolidlightblue;/* Chrome, Safari, Opera */
-moz-column-rule:1pxsolidlightblue;/* Firefox */
column-rule:1pxsolidlightblue;
}
h2 {
-webkit-column-span:all;/* Chrome, Safari, Opera */
column-span:all;
}
</style>
</head>
<body>
<p><b>Note:</b>Firefox andInternet Explorer9(andearlier versions)donotsupport the column-span property.</p>
<div class="newspaper">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
با حذف کردن دستور column-span از کد بالا و بازی با کد متوجه تفاوت خواهید شد.
تعیین عرض ستون ها
دستور column-width به شما اجازه می دهد عرض ستون هایتان را کنترل کنید. به طور مثال کد زیر می گوید که بهترین عرض برای ستون های من 100px است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPEhtml>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:3;/* Chrome, Safari, Opera */
-moz-column-count:3;/* Firefox */
column-count:3;
-webkit-column-width:100px;/* Chrome, Safari, Opera */
-moz-column-width:100px;/* Firefox */
column-width:100px;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer9,andearlier versions,does notsupport the column-width property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟