خلاصه ای کوتاه از سبک های خط تقسیم ستون-قانون. نحوه کار: توضیحات کد CSS

نحوه ساخت بلندگو

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

استفاده از بلوک های شناور امروزه این محبوب ترین راه برای ساخت بلندگوها است، اگرچه Flexbox کم کم جایگزین آن می شود. به طور پیش فرض، دو بلوک در یک جریان عادی نمی توانند در یک خط باشند، اما این رفتار را می توان به راحتی با انتساب ویژگی float به هر دو تغییر داد: left | درست. آنها شروع به فشار دادن روی لبه چپ یا راست خواهند کرد. برای اینکه بلوک زیر آنها بلوک های شناور را بپذیرد و به درستی قرار گیرد، باید آن را به صورت پاک تنظیم کرد: هر دو.

با استفاده از شناورها، اغلب 2 یا 3 ستون ساخته می شود. چیدمان یک سایت با بلوک های شناور خیلی پیچیده نیست، فقط باید برخی از تفاوت های ظریف رفتار آنها را بدانید. به عنوان مثال، اگر شما نیاز به ایجاد یک منطقه برای نمایش مقالات دارید، و در سمت راست - یک ستون کناری با یک منو، بلوک های شناور می توانند به راحتی چنین ترتیبی را اجرا کنند.

استفاده از جداول جداول به طور کلی برای نمایش تعداد زیادی سلول و ستون ایجاد می‌شوند، بنابراین اضافه کردن ستون‌ها به آنها به آسانی پای است. یک جدول می تواند حداقل 20 ستون داشته باشد. کل ساختار آن در کد html مشخص شده است، بنابراین کد کاملاً دست و پا گیر است.

از آنجایی که سلول های یک جدول را می توان به هر اندازه ای تنظیم کرد، قبلاً تقریباً همه وب سایت ها با استفاده از آنها طراحی می شدند. به عنوان مثال، برای پیاده سازی ساده ترین چیدمان (هدر، محتوا، نوار کناری، پاورقی)، سه ردیف در جدول ساخته شد (ردیف جدول با تگ tr تشکیل می شود). هر ردیف شامل دو سلول است زیرا محتوا و نوار کناری باید جدا از یکدیگر قرار گیرند. و در هدر و پاورقی، در صورت لزوم، این سلول ها به سادگی با استفاده از ویژگی colspan در تگ td به هم متصل شدند.

شما به راحتی می توانید قاب را از سلول ها حذف کنید، که به توسعه دهندگان وب اجازه می دهد تا قالب های پیچیده را به راحتی چیدمان کنند.

با استفاده از Flexbox این یک فناوری مدرن است که در سال 2014 شروع به گسترش کرد، اگرچه قبل از آن وجود داشت. ماهیت آن به شرح زیر است: یک بلوک کانتینر مشترک ایجاد می شود که بلوک های دیگری در آن قرار می گیرند که باید به شکل ستون ساخته شوند، سپس به این ظرف باید نمایش داده شود: flex.

در مرحله بعد، ویژگی flex-direction معمولاً تنظیم می شود که جهت محور اصلی که بلوک ها در امتداد آن قرار خواهند گرفت را تعیین می کند. مقادیر را می توان به: ردیف و ستون تنظیم کرد. مقدار اول بلوک ها را به صورت افقی از راست به چپ هدایت می کند، دومی - پایین. همچنین می توانید معکوس را تنظیم کنید: flex-direction: row-reverse. بلوک ها از راست به چپ قرار خواهند گرفت.

همچنین مجموعه ای از ویژگی های جداگانه برای بلوک های فرزند یک ظرف فلکس وجود دارد. اساساً، این ویژگی ها به شما امکان می دهد اندازه بلوک و رفتار آن را نسبت به عناصر دیگر تنظیم کنید.

مزیت flexbox این است که یک عنصر بسیار انعطاف پذیرتر است. اگر با طرح بندی بلوک، توسعه دهندگان وب اغلب مجبور بودند همه چیز را پیکسل به پیکسل محاسبه کنند، تورفتگی های صحیح را تنظیم کنند، ترفندهای مختلفی را به کد اضافه کنند تا همه چیز از هم نپاشد، پس عناصر انعطاف پذیر را می توان به راحتی در یک ستون، در یک ردیف و به طور کلی مرتب کرد. نیاز به محاسبات ریاضی بسیار کمتری از سوی توسعه دهنده دارد.

تقسیم متن به ستون

با این حال، من هنوز به مهم ترین موضوع دست نزده ام. امروزه CSS این امکان را ارائه می دهد که متن را در یک بلاک بدنه بدون کمک شناورها، جداول یا فلکس باکس ها تجزیه کنید. یعنی در html یک بلوک معمولی باقی می ماند و متن صرفاً به لطف css به ستون ها تقسیم می شود.

بنابراین، ویژگی های زیر برای بلوکی اعمال می شود که در آن متن باید به چندین ستون تقسیم شود.

Column-count – خاصیت تعداد ستون هایی را که متن باید به آنها تقسیم شود را مشخص می کند. توصیه می شود بسته به آنچه بیشتر دوست دارید، مقدار را از 2 تا 4 تنظیم کنید.

Column-width - تعداد کاراکترهای متن را در یک ستون تنظیم می کند. من تأکید می کنم که عرض ستون در این مورد نه با پیکسل، بلکه با تعداد کاراکترها تعیین می شود. بهینه: 30-50 کاراکتر در یک ستون. همچنین به هیچ وجه نمی توان این ویژگی را cross-browser نامید، زیرا شما فقط تعداد کاراکترهای دلخواه را تنظیم می کنید، اما اینکه آیا مرورگر مطابق خواسته شما عمل می کند یا خیر، باید دید.

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

ستون-قاعده - خطی را رسم می کند که ستون ها را از هم جدا می کند. سینتکس ویژگی دقیقاً مشابه ویژگی border است. ابتدا ضخامت خط و سپس نوع آن و سپس رنگ آن ثبت می شود.

همچنین می خواهم اشاره کنم که همه این ویژگی های css نسبتا جدید هستند. به عنوان مثال، اینترنت اکسپلورر فقط از نسخه ده پشتیبانی می کند. اینها ویژگی های استاندارد CSS3 هستند، بنابراین اگر می خواهید از آنها در سایت خود استفاده کنید، باید از سازگاری بین مرورگرها مراقبت کنید، در غیر این صورت در نسخه های قدیمی Opera و IE هیچ ستونی وجود نخواهد داشت.

مثال ها

بلوک های شناور چیدمان یک سایت در دو ستون اغلب بسیار ساده با استفاده از بلوک های شناور انجام می شود. در css این چیزی شبیه به این پیاده سازی می شود:

Float-block1( float: چپ ) .float-block2( float: چپ) بلوکی که باید زیر شناورها باشد( روشن: چپ | هر دو)

یعنی بلوک پایین باید این ویژگی را مشخص کند تا به درستی قرار گیرد. بنابراین، بلوک های شناور اگر عرض کافی در عنصر والد داشته باشند به یک خط تبدیل می شوند. به طور طبیعی، شما همچنین باید عرض، ارتفاع و قاب بلوک ها را مشخص کنید تا مانند تصویر زیر باشد:

حالا بیایید قسمت سرگرم کننده را انجام دهیم. بیایید متن تصادفی زیادی را به بلوک اصلی اضافه کنیم و سعی کنیم آن را در سه ستون مانند روزنامه یا مجله نمایش دهیم. برای این کار باید قوانین زیر را به کد این بلوک اضافه کنید.

در مقاله امروز می خواهم در مورد روش جدیدی برای ایجاد ستون های با ارتفاع مساوی با استفاده از CSS صحبت کنم. دیگر نیازی به جاوا اسکریپت نیست تا ارتفاع ستون برای همه یکسان باشد. ماهیت این روش استفاده از یک ویژگی جدید CSS3 است که به ما گزینه های بسیار بیشتری نسبت به ایجاد ستون هایی با ارتفاع یکسان می دهد. اما در این درس خواهیم دید که حل این مشکل دردناک چقدر آسان است.

صفحه آرایی

بخش HTML

بیایید دو ستون تعریف کنیم که بعداً با استفاده از CSS ارتفاع آنها را برابر خواهیم کرد:

یعنی باید بلوک را درست کنیم