چیدمان چند ستونه با css

هدایت عباسی آموزش CSS

چیدمان چند ستونه با css با دستور column-count همراه با چندین مثال و توضیح کامل. ستون بندی در مجلات و روزنامه ها مرسوم است. کدهای زیر را در یک فایل html ذخیره کرده و سپس اجرا کنید تا نتیجه را ببینید.

آموزش دستور column-count

در این بخش از آموزش css از تاپ سایت 98 به سراغ آموزش دستور column-count می رویم.

با دستور column-count می توانیم چند ستون ایجاد کنیم.

این کار برای مجله و روزنامه ها مناسب است.

در اکثر مجلات و روزنامه ها مطالب در چند ستون نوشته می شود.

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

مثال دستور column-count

در زیر مثال دستور column-count را مشاهده می کنید.

در این مثال div یا باکس به سه تون تقسیم شده است و مطلب به سه بخش تقسیم می شود.

<!DOCTYPE html>
<html>
<head>
<style>
.news {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="news">
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 in hendrerit in vulputate 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>

دستور column-gap

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

در مثال زیر فاصله ستون ها 30 پیکسل مشخص کرده ایم.

کافی است دستور column-gap را به مثال بالا اضافه کنید تا نتیجه را ببینید.

دستور column-rule-style

دستور column-rule-style برای مشخص کردن نوع خط استفاده می شود.

با استفاده از دستور column-rule-style می توانیم بین ستون ها یک خط قرار دهیم.

در مثال زیر نحوه استفاده از این دستور را مشاهده می کنید.

دستور column-rule-width

از دستور column-rule-width برای مشخص کردن اندازه یا عرض خط استفاده می شود.

در مثال زیر اندازه خط را 3 پیکسل قرار داده ایم.

با استفاده از دستور column-rule-width می توانیم ضخامت خط را مشخص کنیم.

دستور column-rule-color

از دستور column-rule-color برای مشخص کردن رنگ خط استفاده می شود.

در مثال زیر رنگ خط میان ستون ها را قرمز در نظر گرفته ایم.

دستور column-rule

دستور column-rule شامل 3 ویژگی میباشد عرض یا ضخامت خط ، نوع خط ، رنگ خط .

در مثال زیر بجای 3 دستور از دستور column-rule استفاده کرده ایم.

دستور column-span

در مثال زیر کاربرد دستور column-span را مشاهده می کنید.

توجه : این دستور در مرورگر فایرفاکس پشتیبانی نمی شود. این دستور را با مرورگر کروم تست نمایید.

تگ h2 برای همه div میباشد و h2 در بالای همه متن ها و ستون ها قرار می گیرد.

<!DOCTYPE html>
<html>
<head>
<style>
.news{
column-count: 3;
column-gap: 30px;
column-rule : 2px dotted blue;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="news">
<h2>topsite98</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 in hendrerit in vulputate 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>