آموزش CSS پیشرفته : طرحبندی چند ستونی
مشخصات طرحبندی چند ستونی روشی را برای چیدمان محتوا در ستونها، همانطور که ممکن است در یک روزنامه ببینید، در اختیار شما قرار میدهد. این مقاله نحوه استفاده از این ویژگی را توضیح میدهد.
فایل نقطه شروع ما شامل یک HTML بسیار ساده است: یک wrapper با کلاس container که درون آن یک عنوان و چند پاراگراف قرار دارد.
با کلاس container تبدیل به container چند ستونی ما خواهد شد. ما با استفاده از یکی از دو ویژگی، multicol را فعال میکنیم: یا . ویژگی یک عدد را به عنوان مقدار خود میگیرد و آن تعداد ستون را ایجاد میکند. اگر CSS زیر را به stylesheet خود اضافه کنید و صفحه را مجدداً بارگذاری کنید، سه ستون خواهید داشت:
ستونهایی که ایجاد میکنید عرض انعطافپذیری دارند - مرورگر میزان فضای اختصاص داده شده به هر ستون را محاسبه میکند.
CSS خود را برای استفاده از به صورت زیر تغییر دهید:
مرورگر اکنون هر تعداد ستونی که بتواند از اندازهای که شما مشخص میکنید را به شما ارائه میدهد؛ سپس هر فضای باقیمانده بین ستونهای موجود تقسیم میشود. این بدان معناست که دقیقاً عرضی را که مشخص کردهاید دریافت نخواهید کرد، مگر اینکه کانتینر شما دقیقاً بر آن عرض قابل تقسیم باشد.
ستونهای ایجاد شده توسط multicol را نمیتوان به صورت جداگانه استایلبندی کرد. هیچ راهی برای بزرگتر کردن یک ستون از ستونهای دیگر یا تغییر رنگ پسزمینه یا متن یک ستون وجود ندارد. شما دو فرصت برای تغییر نحوه نمایش ستونها دارید:
- تغییر اندازه فاصله بین ستونها با استفاده از .
- اضافه کردن یک قانون بین ستونها با .
- با استفاده از مثال بالا، اندازه فاصله را با اضافه کردن ویژگی تغییر دهید. میتوانید با مقادیر مختلف بازی کنید - این ویژگی هر واحد طولی را میپذیرد.
حالا با یک قانون بین ستونها اضافه کنید. مشابه ویژگی border که در درسهای قبلی با آن مواجه شدید، مخفف ، و است و همان مقادیر border را میپذیرد.
نکتهای که باید به آن توجه کنید این است که این خطکش به خودی خود هیچ عرضی را اشغال نمیکند. این خطکش روی شکافی که با استفاده از
ایجاد کردهاید قرار میگیرد. برای ایجاد فضای بیشتر در دو طرف خطکش، باید اندازه را افزایش دهید.
شما میتوانید کاری کنید که یک عنصر در تمام ستونها گسترده شود. در این حالت، محتوا در جایی که عنصر گسترده شده است، میشکند و سپس در زیر عنصر ادامه مییابد و مجموعهای جدید از ستونها ایجاد میکند. برای اینکه یک عنصر در تمام ستونها گسترده شود، مقدار all را برای ویژگی مشخص کنید.
نمیتوان کاری کرد که یک عنصر فقط چند ستون را بپوشاند. این ویژگی فقط میتواند مقادیر none (که پیشفرض است) یا all را داشته باشد.
محتوای یک طرح چند ستونی تکهتکه است. اساساً مانند رفتار محتوا در رسانههای صفحهبندی شده رفتار میکند، مانند زمانی که یک صفحه وب را چاپ میکنید. وقتی محتوای خود را به یک ظرف چند ستونی تبدیل میکنید، به ستونها تکهتکه میشود. برای اینکه محتوا این کار را انجام دهد، باید بشکند.
گاهی اوقات، این شکستگی در مکانهایی اتفاق میافتد که منجر به تجربه ضعیف خواندن میشود. در مثال زیر، من از چند ستونی برای طرحبندی مجموعهای از کادرها استفاده کردهام که هر کدام دارای یک عنوان و مقداری متن در داخل خود هستند. اگر ستونها بین این دو قطعه شوند، عنوان از متن جدا میشود.
برای کنترل این رفتار، میتوانیم از ویژگیهایی از مشخصات قطعهبندی CSS استفاده کنیم. این مشخصات به ما ویژگیهایی میدهد تا شکست محتوا را در چند ستونی و در رسانههای صفحهبندی شده کنترل کنیم. به عنوان مثال، با اضافه کردن ویژگی با مقدار avoid به قوانین مربوط به . این ظرف عنوان و متن است، بنابراین نمیخواهیم قطعه قطعه شود.
اضافه شدن این ویژگی باعث میشود جعبهها یکپارچه بمانند.
