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

[tamafi6]

ازروشهای طراحی صفحات وب طراحی صفحات چندستونه ویاروزنامه مانندمیباشد ازروش های قدیمی میتوان استفاده از DIV ویابلوک بندی هرستون نام بردولی امکانی که درCSS3 وجودداره استفاده از column میباشد که میتوان برای هربلوک کلی چندستون ایجادنموددرزیریک نمونه ساخته شده


.content {
-webkit-columns:510em;
-moz-columns:510em;
columns:510em;
-webkit-column-gap:5px;
-moz-column-gap:5px;
column-gap:5px;
padding:03%03%;
-webkit-column-break-after:always;
-moz-column-break-after:always;
column-break-after:always;
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}

این روش درمرورگرهای پیشرفته به خوبی جواب داده فقط کافیه پیشوند مربوط به هرمرورگررابه کدموردنظرافزود المان column خودازچندروش استفاده میکنه که درکدبالا خط اول عددسمت چپ نمایانگرتعدادستون وعدد سمت راست نمایانگرعرض هرستون میباشد که دراینجا از EM بجای پیکسل استفاده شده


-webkit-column-gap:5px;

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


-webkit-column-break-after:always;

برای ایجادشکستگی درستونهااستفاده میشود وبا افزوده شدن مطلب ستون جدیدی به وجودمی آوردکه روش کارآن همانند overflow میباشد که مقادیرمتفاوتی رامیگیره برای ازبین بردن شکستگی متن از


text-align: justify;

استفاده شده البته مقادیربیشتری برای امکانات چندستونه نمودن وجودداره که احتیاج به توضیح بیشتری داره صفحه ضمیمه یک نمونه ساخته شده به این روش هست برای زیباترنمودن و ایجادافکت خاص به هرستون ویالینک نمودن از jquery استفاده شده که برای یک سایت خبری داره طراحی میشه امکانات دیگری به این طراحی قراره افزوده بشه مانند نمونه استفاده ازروش masonry وافکت به هرستون که با کوچک وبزرگ شدن صفحه مرورگر-چینش ستونها به صورت هوشمندانجام بگیره دوستان اگرمایل باشندنمونه قرار داده میشه .

کلیه طراحی هاازروی مجلات ایده گرفته شده

چندنمونه ساخته شده رادراینجامیتوان دید (http://pacifist.xzn.ir/page/-1/-colomn/)