ویژگی شکستن داخلاصولی را برای ترتیب دادن شکستگی‌های صفحه و ستون‌ها در عنصر فعلی تعریف می‌کند. به‌طور پیش‌فرض، شکستگی‌های صفحه یا ستون به‌طور خودکار قرار می‌گیرند و از عناصر والد به ارث برده نمی‌شوند. مقدار اجتناب از صفحه فقط هنگام قالب‌بندی اسناد صفحه‌بندی شده، مانند هنگام چاپ، استفاده می‌شود و برای نماهای صفحه‌بندی نشده، مانند زمانی که در مرورگر نمایش داده می‌شود، نادیده گرفته می‌شود. مقدار اجتناب از ستون برای متن چند ستونی استفاده می شود.
مقادیر معتبر
- CSS2 CSS3 خودکار- شکست خودکار صفحه یا ستون قبل از عنصر فعلی (پیش فرض)
- CSS2 CSS3 اجتناب کردن
- CSS3 اجتناب از صفحه- لغو شکست صفحه در عنصر فعلی
- CSS3 اجتناب از ستون- لغو شکست ستون در داخل عنصر فعلی
نمونه هایی از استفاده
break-inside: خودکار; - توزیع یکنواخت
توزیع یکنواخت محتوا بین ستون ها، که در آن شکست ها به طور خودکار در مناسب ترین مکان ها در داخل یا بین هر عنصر قرار می گیرند. با توزیع یکنواخت، ارتفاع ستون ها تقریباً با چگالی متن یکنواخت کم و بیش یکسان است.
سبک (تعداد ستون: 3؛ فاصله ستون: 2em؛ قانون ستون: 1px جامد #666؛ )
متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن
break-inside: اجتناب-ستون; - لغو شکست ستون
سبک ( تعداد ستون: 3؛ شکاف ستون: 2em؛ قانون ستون: 1px جامد #666؛ ) .style div ( break-inside: avoid-column; )
بلوک 1متن متن متن متن متن متن متن متن متن
بلوک 2متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن
بلوک 3متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن متن
ویژگی break-inside در مشخصات ماژول CSS 3 Multi-Column Layout تعریف شده است، برای عناصر سطح بلوک اعمال می شود و در تمام رسانه های صفحه معتبر است، مقدار آن از یک عنصر والد در سلسله مراتب سند به ارث نمی رسد و به طور پیش فرض خودکار. این ویژگی در حال حاضر در تمام مرورگرهای اصلی پشتیبانی می شود.
همچنین ببینید:
- break-after - قوانینی برای تنظیم ستون یا صفحه شکست پس از یک عنصر
- break-before - قوانینی برای تنظیم یک ستون یا صفحه شکست قبل از یک عنصر
- -webkit-column-break-after - قوانینی برای تنظیم شکست ستون بعد از یک عنصر
- -webkit-column-break-before - قوانینی برای تنظیم شکست ستون قبل از یک عنصر
- -webkit-column-break-inside - قوانینی برای تنظیم شکست ستون در داخل یک عنصر
مدول ستون های CSS3طرح‌بندی چند ستونی را توصیف می‌کند که به شما امکان می‌دهد محتوا را به گونه‌ای سازمان‌دهی کنید که از چندین کانتینر عمودی، مانند روزنامه یا مجله، استفاده کنید. ستون ها می توانند شامل سرفصل ها، متن ها، جداول، تصاویر و هر عنصر درون خطی دیگری باشند.
مدل چند ستونی
پشتیبانی از مرورگر
IE: 10
حاشیه، غیرمتمرکز: 12
فایرفاکس: 52، 2 -moz
کروم: 50, 4 -وبکیت-
سافاری: 9, 3.1 -webkit-
اپرا: 37، 11.5 -webkit-
سافاری iOS: 9, 3.2 -webkit-
مرورگر UC برای اندروید: 11.8
کروم برای اندروید: 73
اینترنت سامسونگ: 5، 4 -وبکیت-
پست قدیمی
24 نوامبر 2012
15 شهر کوچک جذاب در انگلستان
1. Berwick-upon-Tweed
برویک به عنوان یک سکونتگاه آنگلوساکسون در زمان پادشاهی نورثومبریا تأسیس شد که در قرن دهم به انگلستان ملحق شد. این منطقه برای بیش از 400 سال مرکز جنگ های مرزی تاریخی بین پادشاهی های انگلستان و اسکاتلند بود و چندین بار مالکیت برویک بین دو پادشاهی تغییر کرد. آخرین باری که آن را تغییر داد زمانی بود که ریچارد گلاستر آن را در سال 1482 به انگلستان بازگرداند.
امروزه Berwick-upon-Tweed به دلیل تاریخ بسیار قابل مشاهده اش بسیار مورد بازدید قرار گرفته است: دیوارهای شهر قرون وسطایی، باروهای الیزابتی، ویرانه های قلعه قرن سیزدهم، "پل قدیمی" قرن هفدهمی، تالار شهر، اولین پادگان ارتش بریتانیا، شمالی ترین هتل انگلستان و غیره. .
2. چاودار
چاودار باستانی همه خیابان‌های سنگ‌فرش شده و ردیف‌های فروریخته خانه‌های کنار دریا است. در اصل بخشی از کنفدراسیون بنادر Cinque، پنج شهر استراتژیک مهم برای مقاصد تجاری و نظامی در قرون وسطی، امروزه رای عملاً یک موزه زنده است. قلعه چاودار، معروف به برج Ypres، در سال 1249 توسط هنری سوم برای محافظت در برابر حملات مکرر فرانسوی ها ساخته شد. حتی قدیمی تر، خیابان نورمن دوران. کلیسای مریم به شهر می نگرد. Rye همچنین تنها چند دقیقه با یکی از معروف ترین سواحل انگلستان، Camber Sands، یک زمین بازی به طول دو مایل برای کایت سواران و عاشقان ساحل فاصله دارد.
شکل 1. مثالی از طرح چند ستونی
1. تعداد و عرض ستون ها
تعیین تعداد و عرض ستون ها هنگام ساخت یک طرح چند ستونی اساسی است. برای تنظیم تعداد و عرض ستون‌ها از ویژگی‌های تعداد ستون و عرض ستون استفاده می‌شود.
ویژگی سوم، ستون ها، یک ویژگی مختصر است که عرض و تعداد ستون ها را به طور همزمان تنظیم می کند.
عوامل دیگری مانند شکست صریح ستون ها، محتوا و محدودیت ارتفاع می توانند بر تعداد و عرض واقعی ستون ها تأثیر بگذارند.
1.1. عرض ستون: ویژگی ستون-عرض
ویژگی ستون-width حداقل عرضی را که هر ستون باید اشغال کند را مشخص می کند.
ملک به ارث نمی رسد.
نحو
عرض ستون: خودکار. عرض ستون: 100 پیکسل؛ عرض ستون: 10em; عرض ستون: 3.3vw; ستون-width: ارث بردن; ستون-width: اولیه;
1.2. تعداد ستون ها: خاصیت تعداد ستون
ویژگی column-count تعداد ستون ها را توصیف می کند و عرض آنها بر اساس عرض فضای موجود محاسبه می شود. اگر پهنای ستون همزمان با شمارش ستون مشخص شود، تعداد ستون‌ها حداکثر تعداد ستون‌ها در نظر گرفته می‌شود.
ملک به ارث نمی رسد.
نحو
تعداد ستون: خودکار; تعداد ستون: 2; ستون-شمار: ارث بردن; ستون-شمار: اولیه;
1.3. تنظیم ستون ها با استفاده از ویژگی ستون های تک
ویژگی ستون ها یک ویژگی مختصر برای تنظیم عرض ستون و تعداد ستون است. مقادیر حذف شده روی مقادیر اولیه خود تنظیم می شوند.
ملک به ارث نمی رسد.
نحو
ستون ها: 12em; /* عرض ستون: 12em; ستون-شمار: خودکار */ ستون: خودکار 12em; /* عرض ستون: 12em; تعداد ستون: خودکار */ ستون: 2; /* عرض ستون: خودکار; تعداد ستون: 2 */ ستون: 2 خودکار. /* عرض ستون: خودکار; تعداد ستون: 2 */ ستون: خودکار. /* عرض ستون: خودکار; ستون-شمار: خودکار */ ستون ها: خودکار خودکار؛ /* عرض ستون: خودکار; ستون-شمار: خودکار */ ستون ها: ارث بری. ستون ها: اولیه
2. فاصله بین ستون ها و خطوط تقسیم
فضاهای ستون و خطوط تقسیم بین ستون ها در یک ظرف چند ستونی قرار می گیرند. طول فضاها و جداکننده ها برابر با ارتفاع ستون است. شکاف‌های ستون‌ها فضا را اشغال می‌کنند، یعنی محتوای ستون‌های مجاور را از هم جدا می‌کنند.
خط تقسیم در وسط فضای بین ستون ها رسم می شود و فضایی را اشغال نمی کند. یعنی وجود یا ضخامت خط جداکننده جای هیچ چیز دیگری را تغییر نمی دهد.
خطوط درست بالای مرز عنصر چند ستونی نقاشی شده اند. اگر عنصر دارای یک ناحیه قابل پیمایش باشد، خطوط تقسیم همراه با ستون‌ها حرکت می‌کنند. خطوط جداکننده فقط بین دو ستون ظاهر می شوند که دارای محتوا هستند.
2.1. شکاف بین ستون ها: ویژگی ستون-شکاف
ویژگی ستون-شکاف شکاف بین ستون ها را مشخص می کند. اگر با استفاده از ویژگی column-rule یک خط تقسیم برای ستون ها تنظیم کنید، این خط در وسط شکاف قرار می گیرد و عرض آن باعث تغییر عرض کلی نمی شود.
ملک به ارث نمی رسد.
نحو
شکاف ستون: عادی. ستون-شکاف: 3px; شکاف ستون: 2.5em; شکاف ستون: 3%; ستون-شکاف: ارث بردن; ستون-شکاف: اولیه;
2.2. رنگ خط تقسیم: ویژگی ستون-قاعده-رنگ
خاصیت column-rule-color رنگ خط تقسیم را مشخص می کند.
ملک به ارث نمی رسد.
نحو
ستون-قاعده-رنگ: صورتی; ستون-قاعده-رنگ: #D71C3B; column-rule-color: rgb(192, 56, 78); ستون-قاعده-رنگ: شفاف; ستون-قاعده-رنگ: hsla (0، 100٪، 50٪، 0.6)؛ ستون-قاعده-رنگ: ارث بردن; ستون-قاعده-رنگ: اولیه;
2.3. سبک خط تقسیم کننده: ویژگی ستون-قاعده-سبک
ویژگی ستون-قاعده-سبک استایل خط تقسیم را تنظیم می کند.
ملک به ارث نمی رسد.
| ستون-قاعده-سبک | |
|---|---|
| ارزش های: | |
| هیچ یک | مقدار به 0 ارزیابی می شود. مقدار پیش فرض. |
| پنهان شده است | مانند مقدار none، خط پنهان است. |
| خط چین | یک خط را به صورت مجموعه ای از نقاط مربع نشان می دهد. |
| نقطه چین | یک خط را به صورت دنباله ای از خط تیره نشان می دهد. |
| جامد | خط منظم. |
| دو برابر | خط تقسیم را به شکل دو خط نازک موازی که در فاصله ای از یکدیگر قرار دارند نشان می دهد. عرض خط تقسیم مشخص نشده است، اما مجموع خطوط و فاصله بین آنها برابر با مقدار ستون-قاعده-عرض است. |
| شیار | یک خط حجمی فشرده شده روی بوم را نشان می دهد. این با ایجاد سایه ای از دو رنگ، یکی تیره تر و دیگری روشن تر به دست می آید. |
| خط الراس | خط تقسیم حجم را نشان می دهد، یعنی. اثر مخالف شیار. |
| درونی | یک خط ثابت را با رنگی تیره تر از رنگ خط مشخص شده نمایش می دهد. |
| ابتدا | یک خط ثابت با رنگ مشخص شده توسط ویژگی ستون-قاعده-رنگ را نشان می دهد. |
| اولیه | مقدار ویژگی را به مقدار پیش فرض تنظیم می کند. |
| به ارث می برند | مقدار ویژگی را از عنصر والد به ارث می برد. |
نحو
ستون-قاعده-سبک: هیچکدام. ستون-قاعده-سبک: پنهان؛ ستون-قاعده-سبک: نقطه چین; ستون-قاعده-سبک: خط چین; ستون-قاعده-سبک: جامد; column-rule-style: double; ستون-قاعده-سبک: شیار; ستون-قاعده-سبک: خط الراس; column-rule-style: inset; column-rule-style:outset; column-rule-style: inherit; ستون-قاعده-سبک: اولیه;
2.4. عرض خط تقسیم: ویژگی ستون-قاعده-عرض
ویژگی ستون-قاعده-عرض عرض خط تقسیم را تعیین می کند. مقادیر منفی مجاز نیستند. بدون ویژگی ستون-قاعده-سبک کار نمی کند.
ملک به ارث نمی رسد.
نحو
ستون-قاعده-عرض: نازک. ستون-قاعده-عرض: متوسط; ستون-قاعده-عرض: ضخیم. ستون-قاعده-عرض: 1px; ستون-قاعده-عرض: 2.5em; column-rule-width: ارث بردن; ستون-قاعده-عرض: اولیه;
2.5. خلاصه ای سریع از ویژگی های خط تقسیم: ویژگی ستون-قاعده
ویژگی ستون-قاعده مخفف ویژگی ستون-قاعده-عرض ستون-قاعده-سبک ستون-قاعده-رنگ است.
ملک به ارث نمی رسد.
نحو
قاعده ستون: نقطه‌دار. ستون-قاعده: جامد 8 پیکسل. ستون-قاعده: آبی جامد. ستون-قاعده: رنگ آبی ضخیم. ستون-قاعده: ارث بردن; ستون-قاعده: اولیه;
3. شکستن ستون
هنگامی که محتوا در چندین ستون قرار می گیرد، مرورگر باید تعیین کند که شکست ستون ها در کجا قرار می گیرند. مشکل شکستن محتوا به ستون شبیه به شکستن محتوا به صفحات است. برای پرداختن به این مشکل، سه ویژگی جدید معرفی شده‌اند تا اجازه می‌دهند شکست ستون‌ها در ویژگی‌های شکست صفحه توصیف شوند: break-before، break-after و break-inside.
4. پوشا ستون: خاصیت ستونی دهانه
ویژگی ستون-span به یک عنصر اجازه می دهد تا چندین ستون را بپوشاند. این نه برای بلوک ظرف، بلکه برای یک عنصر خاص در داخل، به عنوان مثال، برای یک هدر نشان داده شده است.
در آینده می‌توان تعداد ستون‌هایی را که می‌خواهند باز شوند، مشخص کرد، مشابه ویژگی colspan که می‌تواند در سلول جدول اعمال شود، اما مشخصات CSS3 فقط دو مقدار ممکن دارد: هیچ و همه.
این ویژگی به طور پیش فرض در فایرفاکس کار نمی کند. کاربر باید به صراحت این ویژگی را فعال کند، layout.css.column-span.enabled باید روی true تنظیم شود. برای تغییر تنظیمات در فایرفاکس، به about:config بروید.
ملک به ارث نمی رسد.
نحو
دهانه ستون: هیچ. ستون-span: همه; ستون-span: ارث بردن; ستون-span: اولیه;
5. پر کردن ستون ها با محتوا: ویژگی ستون-پر
ویژگی column-fill نحوه پر شدن ستون ها با محتوا را کنترل می کند. دو استراتژی برای پر کردن ستون‌ها وجود دارد: ستون‌ها می‌توانند از نظر ارتفاع تراز شوند یا نباشند. اگر ستون‌ها تراز هستند، مرورگرها باید سعی کنند تغییرات ارتفاع ستون را به حداقل برسانند، در حالی که وقفه‌های اجباری، بیوه‌ها، یتیم‌ها و سایر ویژگی‌هایی که ممکن است بر ارتفاع ستون تأثیر بگذارند را در نظر بگیرند. اگر ستون ها تراز نباشند، به صورت متوالی پر می شوند، ممکن است برخی از آنها تا حدی پر شده باشند یا اصلاً پر نشده باشند.
ملک به ارث نمی رسد.
نحو
ستون پر: خودکار. ستون-پر: تعادل; column-fill: balance-all; ستون-پر: ارث بردن; ستون-پر: اولیه;
6. سرریز
6.1. سرریز داخل ظروف چند ستونی
به جز جایی که باعث شکسته شدن یک ستون شود، محتوایی که فراتر از مرزهای یک ستون است فراتر از مرزهای آن گسترش می یابد و قطع نمی شود. این در درجه اول در مورد تصاویر صدق می کند. برای حل این مشکل باید ویژگی های زیر را برای تصاویر تنظیم کنید:
Img (نمایش: بلوک؛ /*حذف لایه پایینی زیر تصویر*/ عرض: 100%؛ /*تصویر را به کل عرض بلوک ظرف بکشید*/ )
6.2. صفحه بندی و سرریز خارج از کانتینرهای چند ستونی
محتوا و خطوط تقسیمی که فراتر از ستون‌ها در لبه‌های یک ظرف چند ستونی گسترش می‌یابند، بر اساس ویژگی سرریز بریده می‌شوند.
یک کانتینر چند ستونی ممکن است به دلیل محدودیت های ارتفاع ستون (مانند ارتفاع یا حداکثر ارتفاع) و شکستگی های صریح ستون، تعداد ستون های بیشتری نسبت به جایی داشته باشد که برای آن جا دارد. در این مورد، ستون های اضافی در جهت ردیف ایجاد می شود و به صفحات بعدی منتقل می شود.
را ماژول چیدمان چند ستونی CSSگسترش می دهد حالت طرح بندی بلوکتا امکان تعریف آسان چندین ستون متن را فراهم کند.اگر خطوط بیش از حد طولانی باشد، مردم در خواندن متن مشکل دارند. اگر حرکت چشم ها از انتهای یک خط به ابتدای خط بعدی خیلی طول بکشد، مسیری را که در کدام خط قرار دارند از دست می دهند. بنابراین، برای استفاده حداکثری از یک صفحه نمایش بزرگ، نویسندگان باید ستون های متنی با عرض محدود را در کنار هم قرار دهند، درست مانند روزنامه ها.
متأسفانه این کار با CSS و HTML بدون اجبار شکستن ستون ها در موقعیت های ثابت، یا محدود کردن شدید نشانه گذاری مجاز در متن، یا استفاده از اسکریپت های قهرمانانه غیرممکن است. این محدودیت با افزودن ویژگی های جدید CSS برای گسترش حالت طرح بندی بلوک سنتی حل می شود.
با استفاده از ستون ها
تعداد و عرض ستون
دو ویژگی CSS کنترل می کنند که آیا و چند ستون ظاهر شود: ستون-count و ستون-عرض.
ویژگی column-count تعداد ستون ها را روی یک عدد خاص تنظیم می کند. به عنوان مثال.،
مثال 1
HTML
Lorem ipsum dolor sit amet، consectetur adipisicing elit، sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS
#col ( تعداد ستون: 2; )نتیجه
محتوا را در دو ستون نمایش می دهد (اگر از یک مرورگر سازگار با چند ستون استفاده می کنید):
ویژگی ستون-width حداقل عرض ستون مورد نظر را تنظیم می کند. اگر تعداد ستون‌ها نیز تنظیم نشده باشد، مرورگر به‌طور خودکار به تعداد ستون‌های متناسب با عرض موجود می‌سازد.
مثال 2
HTML
CSS
#wid (عرض ستون: 100 پیکسل؛ )نتیجه
در یک بلوک چند ستونی، محتوا به صورت خودکار از یک ستون به ستون بعدی در صورت نیاز جریان می یابد. همه عملکردهای HTML، CSS و DOM در ستون‌ها پشتیبانی می‌شوند، همانطور که ویرایش و چاپ نیز وجود دارد.
کوتاه نویسی ستون ها
بیشتر اوقات، یک طراح وب از یکی از دو ویژگی CSS استفاده می کند: تعداد ستون یا عرض ستون. از آنجایی که مقادیر این ویژگی ها با هم تداخل ندارند، اغلب استفاده از ستون های مختصر راحت است. به عنوان مثال.
اعلان CSS ستون-width: 12em را می توان با ستون های: 12em جایگزین کرد.
مثال 3
HTML
CSS
#col_short ( ستون‌ها: 12em؛ )اعلان CSS ستون-count: 4 را می توان با ستون های: 4 جایگزین کرد.
مثال 4
HTML
CSS
#ستون_4 ( ستون: 4; )نتیجه
دو اعلان CSS عرض ستون: 8em و ستون تعداد: 12 را می توان با ستون های: 12 8em جایگزین کرد.
مثال 5
HTML
CSS
#columns_12 ( ستون‌ها: 12 8em؛ )نتیجه
تعادل قد
مشخصات ستون CSS3 مستلزم آن است که ارتفاع ستون ها باید متعادل باشد: یعنی مرورگر به طور خودکار حداکثر ارتفاع ستون را تنظیم می کند تا ارتفاع محتوای هر ستون تقریباً برابر باشد. فایرفاکس این کار را انجام می دهد.
با این حال، در برخی موقعیت‌ها، تنظیم حداکثر ارتفاع ستون‌ها به طور صریح، و سپس چیدمان محتوا با شروع از ستون اول و ایجاد ستون‌های مورد نیاز، که احتمالاً به سمت راست سرریز می‌شوند نیز مفید است. بنابراین، اگر ارتفاع محدود باشد، با تنظیم ویژگی های ارتفاع CSS یا max-height در یک بلوک چند ستونی، هر ستون اجازه دارد تا قبل از افزودن ستون جدید تا آن ارتفاع رشد کند. این حالت برای چیدمان نیز بسیار کارآمدتر است.
شکاف های ستون
بین ستون ها فاصله وجود دارد. پیش فرض توصیه شده 1em است. این اندازه را می توان با اعمال ویژگی ستون-شکاف در بلوک چند ستونی تغییر داد:
مثال 6
HTML
CSS
#شکاف_ستون ( تعداد ستون: 5؛ شکاف ستون: 2em؛ )نتیجه
افت شدید
ویژگی های ستون فقط توسط مرورگرهایی که از ستون پشتیبانی نمی کنند نادیده گرفته می شوند. بنابراین ایجاد یک طرح بندی که در یک ستون در آن مرورگرها نمایش داده می شود و از چندین ستون در مرورگرهای پشتیبانی کننده استفاده می شود، نسبتاً آسان است.
نتیجه
ستون های CSS3 یک چیدمان اولیه هستند که به توسعه دهندگان وب کمک می کند تا بهترین استفاده را از املاک صفحه نمایش داشته باشند. توسعه دهندگان تخیلی ممکن است کاربردهای زیادی برای آنها پیدا کنند، به خصوص با ویژگی تعادل خودکار ارتفاع.
چگونه متن را در یک صفحه در چندین ستون مرتب کنیم؟ و آیا این کار به صورت خودکار قابل انجام است؟ مطمئناً، بسیاری از شما که درگیر توسعه وب هستید یا بوده‌اید با این مشکل مواجه شده‌اید - و اغلب با راه‌حل‌های پیچیده‌ای مواجه می‌شوید که به سبک‌های پیچیده یا استفاده از کتابخانه‌های جاوا اسکریپت اضافی نیاز دارد (به عنوان مثال، پلاگین Columnizer برای jQuery را ببینید).
طرح بندی محتوای چند ستونی (نباید با وظیفه صفحه آرایی عمومی چند ستونی اشتباه گرفته شود، که تقریباً به مشکل چیدمان بلوک ها در یک شبکه نزدیک تر است) برای مدت طولانی راه خود را در دنیای استانداردهای وب باز کرده است. و در نهایت، نه تنها به وضعیت پیشنهادی کاندید در قالب ماژول CSS3 چند ماژول مربوطه رسیده است - طرح ستونی، بلکه پشتیبانی نسبتاً گسترده ای در مرورگرها دریافت کرده است: جایی با پیشوندها (-moz- یا -webkit-) و جایی در حال حاضر (Opera 11.1+) و نسخه های برنامه ریزی شده (IE10+)، و بلافاصله بدون پیشوند.
اظهار نظر
در مورد اینترنت اکسپلورر 10، این به طور خودکار به این معنی است که می توانید از CSS3 Multi-Column هنگام توسعه برنامه های سبک Metro برای ویندوز 8 با استفاده از HTML/CSS/JS استفاده کنید.
برای اهداف این مقاله، من از پیشوندهای مرورگر برای اشتباه گرفتن کد استفاده نمی کنم، اما در استفاده واقعی، فراموش نکنید که پشتیبانی از پیشوند برای فایرفاکس، سافاری و کروم را اضافه کنید.
اجازه دهید فوراً به دو جزئیات مهم دیگر اشاره کنم.
اولاً، در بیشتر موارد، استفاده از طرح‌بندی چند ستونی برای متن را می‌توان به‌عنوان توسعه‌ای برای نمایش محتوای سایت در امتداد مسیر پیشرفت پیشرو در نظر گرفت، که در آن کاربران سایت‌های مدرن‌تر، چیزهای بیشتری دریافت خواهند کرد:
ثانیاً، نمایش چند ستونی به خوبی با قابلیت‌های Media Queries (و ایده‌های طراحی واکنش‌گرا) مطابقت دارد، برای مثال، در اندازه‌های مختلف صفحه می‌توانید متن را در تعداد ستون‌های متفاوتی قالب‌بندی کنید:
و آخرین چیزی که مایلم در مقدمه متذکر شوم، برای اینکه بیشتر در این مورد تمرکز نکنم و با وجدان راحت به جزئیات فنی ادامه ندهم: هنگام استفاده از طرح بندی متن چند ستونی، باید به یاد داشته باشید که چنین ترتیبی همچنین مستلزم ترتیب خواندن معین (برای زبان های اروپایی، از چپ به راست). بنابراین، مهم است که برای جابجایی نگاه از یک ستون به ستون دیگر، لازم است تا حد امکان اقدامات اضافی انجام شود، به خصوص در مورد طومارهای عمودی:
از این نظر، ماهیت افقی ستون ها بهتر با پیمایش افقی ترکیب می شود (همانطور که در بسیاری از برنامه های Win8 استفاده می شود - به عنوان مثال، این به وضوح در برنامه USA Today قابل مشاهده است):
به طور کلی، اسپیکرها عالی هستند، اما تجربه کاربری را فراموش نکنید. و حالا وارد نبرد!
ستون ها
بنابراین، ما متنی (محتوا) داریم که می خواهیم آن را در چندین ستون قرار دهیم. از کجا شروع کنیم؟
برای تبدیل چنین عنصری به یک عنصر چند ستونی، باید یکی از ویژگی ها را از طریق سبک های CSS تنظیم کنید: عرض ستونیا تعداد ستونبه معنایی غیر از خودکار. مثلا،
برای تقسیم متن به دو ستون، این کار را انجام دهید:
مقاله ( تعداد ستون: 2; )
مرورگر بقیه کارها را انجام خواهد داد: 
دارایی جایگزین - عرض ستون- به شما اجازه می دهد تا عرض ستون بهینه را تنظیم کنید:
مقاله (عرض ستون: 150 پیکسل؛ )
در این مورد، مرورگر خود محتوا را به تعداد مورد نیاز ستون برای پر کردن ظرف بیرونی تقسیم می‌کند و با عرض ستون مشخص شده سازگار می‌شود. نکته مهم این است که عرض واقعی ممکن است با عرض مشخص شده متفاوت باشدبالا یا پایین: در تصویر بالا، نوار خاکستری دقیقاً 150 پیکسل عرض دارد - و همانطور که می بینید، از عرض واقعی ستون کوچکتر است.
این رفتار با مشخصات تعریف می‌شود و اجازه می‌دهد تا (به طور خودکار) انعطاف‌پذیری بیشتری در هنگام توسعه نشانه‌گذاری پاسخگو داشته باشید:
به عنوان مثال، اگر ظرفی با عرض 100 پیکسل داشته باشید و عرض ستون ها را 45 پیکسل تنظیم کنید، مرورگر در نظر می گیرد که فقط دو ستون جا می شود و برای پر کردن کل فضا، اندازه هر کدام را افزایش می دهد تا 50 پیکسل (این همچنین فضای بین ستون ها را در نظر می گیرد که در بخش بعدی مورد بحث قرار خواهد گرفت.)
به یک معنا، این می تواند جایگزینی برای استفاده از Media Queries برای تعیین تعداد متفاوتی از ستون ها بسته به اندازه پنجره و محاسبه خودکار عرض ستون ها باشد:
@media (دقیقه عرض: 400 پیکسل) ( مقاله ( تعداد ستون: 2؛ ) ) @media (دقیقه عرض: 600 پیکسل) ( مقاله ( تعداد ستون: 3; ) ) ...
این دومین بار است که در مورد یک جایگزین صحبت می کنم - و دلیل آن اینجاست.
شمارش در مقابل عرض
همانطور که قبلاً از توضیحات بالا مشخص است ، مشخصات دو روش برای تنظیم تعداد و عرض ستون ها ارائه می دهد (به هر حال ، برای همه ستون ها یکسان است!):- تعداد ستونبه شما امکان می‌دهد تعداد ستون‌هایی را که می‌خواهید محتوا را به آنها تقسیم کنید، مشخص کنید، در حالی که عرض ستون‌ها با در نظر گرفتن فضای موجود توسط مرورگر تعیین می‌شود.
- عرض ستوناز سمت معکوس می آید: نشان می دهد که ستون ها تقریباً چه مقدار باید باشند، با این حال، محاسبه تعداد آنها را به صلاحدید مرورگر واگذار می کند.
ستون ها: 12em; /* عرض ستون: 12em; ستون-شمار: خودکار; */ ستون ها: 2; /* عرض ستون: خودکار; تعداد ستون: 2; */ ستون ها: خودکار؛ /* عرض ستون: خودکار; ستون-شمار: خودکار; */ ستون ها: خودکار 12em. /* عرض ستون: 12em; ستون-شمار: خودکار; */ ستون: 2 خودکار. /* عرض ستون: خودکار; تعداد ستون: 2; */
اگر هم تعداد ستون ها و هم عرض بهینه را مشخص کنید چه اتفاقی می افتد؟ با توجه به مشخصات، در این مورد تعداد ستونحداکثر تعداد ستون ها را مشخص می کند:
مقاله ( ستون‌ها: 150 پیکسل 3؛ /* عرض ستون: 150 پیکسل؛ تعداد ستون: 3؛ */ )
در واقع، به دنبال توسعه استانداردهای وب، از جمله برخی از مقالات من در مورد CSS3 (برای مثال، را ببینید)، امیدوارم از فرصت هایی که برای توسعه دهندگان وب باز می شود کمتر الهام بگیرید. ابزارهای تطبیقی، منعطف و قدرتمند برای مدیریت قرار دادن محتوا نزدیک‌تر و در دسترس‌تر می‌شوند. و حل مشکلات پیچیده آسان تر می شود.
در ارتباط بودن
می‌توانید در ietestdrive.com با نحوه عملکرد CSS3 Multi-Column بازی کنید:
آن را امتحان کنید، آزمایش کنید. گزارش اشکالات به توسعه دهندگان مرورگر. و فراموش نکنید که به این فکر کنید که کاربران مرورگرهای قدیمی (و به ظاهر مدرن، اما هنوز کاملاً با استانداردها مطابقت ندارند) چه چیزی را می بینند - برای مثال، می توانید از یک افزونه برای jQuery Columnizer استفاده کنید. سازگاری و بینندگان نمایشگرهای کوچک و بزرگ را به خاطر بسپارید.
چگونه متن را در یک صفحه در چندین ستون مرتب کنیم؟ و آیا این کار به صورت خودکار قابل انجام است؟ مطمئناً، بسیاری از شما که درگیر توسعه وب هستید یا بوده‌اید با این مشکل مواجه شده‌اید - و اغلب با راه‌حل‌های پیچیده‌ای مواجه می‌شوید که به سبک‌های پیچیده یا استفاده از کتابخانه‌های جاوا اسکریپت اضافی نیاز دارد (به عنوان مثال، پلاگین Columnizer برای jQuery را ببینید).
طرح بندی محتوای چند ستونی (نباید با وظیفه صفحه آرایی عمومی چند ستونی اشتباه گرفته شود، که تقریباً به مشکل چیدمان بلوک ها در یک شبکه نزدیک تر است) برای مدت طولانی راه خود را در دنیای استانداردهای وب باز کرده است. و در نهایت، نه تنها به وضعیت پیشنهادی کاندید در قالب ماژول CSS3 چند ماژول مربوطه رسیده است - طرح ستونی، بلکه پشتیبانی نسبتاً گسترده ای در مرورگرها دریافت کرده است: جایی با پیشوندها (-moz- یا -webkit-) و جایی در حال حاضر (Opera 11.1+) و نسخه های برنامه ریزی شده (IE10+)، و بلافاصله بدون پیشوند.
اظهار نظر
در مورد اینترنت اکسپلورر 10، این به طور خودکار به این معنی است که می توانید از CSS3 Multi-Column هنگام توسعه برنامه های سبک Metro برای ویندوز 8 با استفاده از HTML/CSS/JS استفاده کنید.
برای اهداف این مقاله، من از پیشوندهای مرورگر برای اشتباه گرفتن کد استفاده نمی کنم، اما در استفاده واقعی، فراموش نکنید که پشتیبانی از پیشوند برای فایرفاکس، سافاری و کروم را اضافه کنید.
اجازه دهید فوراً به دو جزئیات مهم دیگر اشاره کنم.
اولاً، در بیشتر موارد، استفاده از طرح‌بندی چند ستونی برای متن را می‌توان به‌عنوان توسعه‌ای برای نمایش محتوای سایت در امتداد مسیر پیشرفت پیشرو در نظر گرفت، که در آن کاربران سایت‌های مدرن‌تر، چیزهای بیشتری دریافت خواهند کرد:
ثانیاً، نمایش چند ستونی به خوبی با قابلیت‌های Media Queries (و ایده‌های طراحی واکنش‌گرا) مطابقت دارد، برای مثال، در اندازه‌های مختلف صفحه می‌توانید متن را در تعداد ستون‌های متفاوتی قالب‌بندی کنید:
و آخرین چیزی که مایلم در مقدمه متذکر شوم، برای اینکه بیشتر در این مورد تمرکز نکنم و با وجدان راحت به جزئیات فنی ادامه ندهم: هنگام استفاده از طرح بندی متن چند ستونی، باید به یاد داشته باشید که چنین ترتیبی همچنین مستلزم ترتیب خواندن معین (برای زبان های اروپایی، از چپ به راست). بنابراین، مهم است که برای جابجایی نگاه از یک ستون به ستون دیگر، لازم است تا حد امکان اقدامات اضافی انجام شود، به خصوص در مورد طومارهای عمودی:
از این نظر، ماهیت افقی ستون ها بهتر با پیمایش افقی ترکیب می شود (همانطور که در بسیاری از برنامه های Win8 استفاده می شود - به عنوان مثال، این به وضوح در برنامه USA Today قابل مشاهده است):
به طور کلی، اسپیکرها عالی هستند، اما تجربه کاربری را فراموش نکنید. و حالا وارد نبرد!
ستون ها
بنابراین، ما متنی (محتوا) داریم که می خواهیم آن را در چندین ستون قرار دهیم. از کجا شروع کنیم؟
برای تبدیل چنین عنصری به یک عنصر چند ستونی، باید یکی از ویژگی ها را از طریق سبک های CSS تنظیم کنید: عرض ستونیا تعداد ستونبه معنایی غیر از خودکار. مثلا،
برای تقسیم متن به دو ستون، این کار را انجام دهید:
مقاله ( تعداد ستون: 2; )
مرورگر بقیه کارها را انجام خواهد داد:
دارایی جایگزین - عرض ستون- به شما اجازه می دهد تا عرض ستون بهینه را تنظیم کنید:
مقاله (عرض ستون: 150 پیکسل؛ )
در این مورد، مرورگر خود محتوا را به تعداد مورد نیاز ستون برای پر کردن ظرف بیرونی تقسیم می‌کند و با عرض ستون مشخص شده سازگار می‌شود. نکته مهم این است که عرض واقعی ممکن است با عرض مشخص شده متفاوت باشدبالا یا پایین: در تصویر بالا، نوار خاکستری دقیقاً 150 پیکسل عرض دارد - و همانطور که می بینید، از عرض واقعی ستون کوچکتر است.
این رفتار با مشخصات تعریف می‌شود و اجازه می‌دهد تا (به طور خودکار) انعطاف‌پذیری بیشتری در هنگام توسعه نشانه‌گذاری پاسخگو داشته باشید:
به عنوان مثال، اگر ظرفی با عرض 100 پیکسل داشته باشید و عرض ستون ها را 45 پیکسل تنظیم کنید، مرورگر در نظر می گیرد که فقط دو ستون جا می شود و برای پر کردن کل فضا، اندازه هر کدام را افزایش می دهد تا 50 پیکسل (این همچنین فضای بین ستون ها را در نظر می گیرد که در بخش بعدی مورد بحث قرار خواهد گرفت.)
به یک معنا، این می تواند جایگزینی برای استفاده از Media Queries برای تعیین تعداد متفاوتی از ستون ها بسته به اندازه پنجره و محاسبه خودکار عرض ستون ها باشد:
@media (دقیقه عرض: 400 پیکسل) ( مقاله ( تعداد ستون: 2؛ ) ) @media (دقیقه عرض: 600 پیکسل) ( مقاله ( تعداد ستون: 3; ) ) ...
این دومین بار است که در مورد یک جایگزین صحبت می کنم - و دلیل آن اینجاست.
شمارش در مقابل عرض
همانطور که قبلاً از توضیحات بالا مشخص است ، مشخصات دو روش برای تنظیم تعداد و عرض ستون ها ارائه می دهد (به هر حال ، برای همه ستون ها یکسان است!):- تعداد ستونبه شما امکان می‌دهد تعداد ستون‌هایی را که می‌خواهید محتوا را به آنها تقسیم کنید، مشخص کنید، در حالی که عرض ستون‌ها با در نظر گرفتن فضای موجود توسط مرورگر تعیین می‌شود.
- عرض ستوناز سمت معکوس می آید: نشان می دهد که ستون ها تقریباً چه مقدار باید باشند، با این حال، محاسبه تعداد آنها را به صلاحدید مرورگر واگذار می کند.
ستون ها: 12em; /* عرض ستون: 12em; ستون-شمار: خودکار; */ ستون ها: 2; /* عرض ستون: خودکار; تعداد ستون: 2; */ ستون ها: خودکار؛ /* عرض ستون: خودکار; ستون-شمار: خودکار; */ ستون ها: خودکار 12em. /* عرض ستون: 12em; ستون-شمار: خودکار; */ ستون: 2 خودکار. /* عرض ستون: خودکار; تعداد ستون: 2; */
اگر هم تعداد ستون ها و هم عرض بهینه را مشخص کنید چه اتفاقی می افتد؟ با توجه به مشخصات، در این مورد تعداد ستونحداکثر تعداد ستون ها را مشخص می کند:
مقاله ( ستون‌ها: 150 پیکسل 3؛ /* عرض ستون: 150 پیکسل؛ تعداد ستون: 3؛ */ )
در واقع، به دنبال توسعه استانداردهای وب، از جمله برخی از مقالات من در مورد CSS3 (برای مثال، را ببینید)، امیدوارم از فرصت هایی که برای توسعه دهندگان وب باز می شود کمتر الهام بگیرید. ابزارهای تطبیقی، منعطف و قدرتمند برای مدیریت قرار دادن محتوا نزدیک‌تر و در دسترس‌تر می‌شوند. و حل مشکلات پیچیده آسان تر می شود.
در ارتباط بودن
می‌توانید در ietestdrive.com با نحوه عملکرد CSS3 Multi-Column بازی کنید:
آن را امتحان کنید، آزمایش کنید. گزارش اشکالات به توسعه دهندگان مرورگر. و فراموش نکنید که به این فکر کنید که کاربران مرورگرهای قدیمی (و به ظاهر مدرن، اما هنوز کاملاً با استانداردها مطابقت ندارند) چه چیزی را می بینند - برای مثال، می توانید از یک افزونه برای jQuery Columnizer استفاده کنید. سازگاری و بینندگان نمایشگرهای کوچک و بزرگ را به خاطر بسپارید.