Layout - مثال‌های Float

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

مجموعه ای از جعبه‌ها / جعبه هایی با عرض یکسان

با ویژگی float، چیدن جعبه‌های محتوا در کنار هم بسیار آسان است:

مثال

1 * {
2   box-sizing: border-box;
3 }
4 
5 .box {
6   float: left;
7   width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
8   padding: 50px; /* if you want space between the images */
9 }

مشاهدهٔ نتیجه

Box-sizing چیست؟

به راحتی می‌توانید سه جعبه را کنار هم قرار دهید. اما، زمانی که چیزی را به کنترل اضافه می‌کنید که عرض جعبه را افزایش می‌دهد (مانند padding یا کادرها) جعبه شکسته می‌شود. ویژگی box-sizing به ما اجازه می‌دهد که padding و کادر را درون عرض کل (و ارتفاع) جعبه داشته باشیم، و ضمانت می‌کند که padding درون جعبه می‌ماند و جعبه شکسته نمی‌شود.

  نکته: شما می‌توانید مطالب بیشتری را دراین‌باره در فصل Box-sizing در CSS بخوانید.

تصاویر کنار هم

مجموعه ای از جعبه‌ها را می‌توان برای نمایش چندین تصویر در کنارهم استفاده کرد:

مثال

1 .img-container {
2   float: left;
3   width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
4   padding: 5px; /* if you want space between the images */
5 }

مشاهدهٔ نتیجه

جعبه هایی با ارتفاع برابر

در مثال قبل، یادگرفتید که چگونه جعبه‌ها را در کنارهم با عرض یکسان قرار دهید. با این حال، ساخت جعبه‌ها با ارتفاع برابر و قراردادن آنها در کنار یک دیگر کار آسانی نیست. اما یک راه حل سریع، تنظیم ارتفاع به صورت fixed است، همانند مثال زیر:

مثال

1 .box {
2   height: 500px;
3 }

مشاهدهٔ نتیجه

با این حال، این حالت خیلی انعطاف‌پذیر نیست. اگر بتوان ضمانت کرد که جعبه‌ها همیشه مقدار محتوا یکسانی دارند مشکلی نیست. اما در بسیاری از موارد، محتوا یکسان نیست. اگر مثال بالا را در موبایل آزمایش کنید، خواهید دید که محتوای جعبه دوم بیرون از جعبه نمایش داده خواهد شد. در این حالت flextbox در CSS3 به کار می‌آید - چرا که می‌تواند بطور خودکار جعبه‌ها را گسترش دهد تا به اندازه بزرگترین جعبه شوند:

مثال

استفاده از Flextbox برای ساخت جعبه‌های قابل انعطاف:

مشاهدهٔ نتیجه

تنها مشکل موجود با Flexbox این است که در نسخه ۱۰ مرورگر اینترنت اکسپلور و نسخه‌های قدیمی‌تر کار نمی‌کند.

  نکته: می‌توانید مطالب بیشتری را در مورد ماژول Layout flexbox در فصل flexbox بخوانید.

منوی navigation (به فارسی: ناوبری)

از ویژگی float با لیستی از ابر لینک‌ها برای ساخت یک منوی افقی استفاده می‌کند:

مثال

مشاهدهٔ نتیجه

مثال چیدمان وب

همچنین انجام چیدمان کل وب با استفاده از ویژگی float رایج است:

مثال

 1 .header, .footer {
 2   background-color: grey;
 3   color: white;
 4   padding: 15px;
 5 }
 6 
 7 .column {
 8   float: left;
 9   padding: 15px;
10 }
11 
12 .clearfix::after {
13   content: "";
14   clear: both;
15   display: table;
16 }
17 
18 .menu {
19   width: 25%;
20 }
21 
22 .content {
23   width: 75%;
24 }

مشاهدهٔ نتیجه

مثال های بیشتر

تصویری با کادر و margin که در سمت راست یک پاراگراف

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

اجازه دادن به یک تصویر با یک زیرنویس که در سمت راست قرار می‌گیرد.

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

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

ساخت یک وب سایت با float

استفاده از float برای ساخت یک صفحه خانگی با یک navbar ,header ,footer محتوای سمت چپ و محتوای اصلی.

تمامی ویژگی‌های float در CSS

ویژگی	توضیحات
box-sizing	مشخص می‌کند که چطور عرض و ارتفاع یک عنصر محاسبه می‌شود: این اندازه ها باید شامل padding و کادرها (borders) باشد یا نه
clear	مشخص می‌کند که چه عناصری می‌توانند در کنار عناصر cleared و در کدام جهت قرار بگیرند
float	مشخص می‌کند که چگونه یک عنصر می‌بایست float شود
overflow	مشخص می‌کند که چه اتفاقی می‌بایست در صورتی که محتوای یک عنصر از اندازه آن عنصر سرریز داشته باشد رخ دهد
overflow-x	مشخص می‌کند که چه کاری می‌بایست با جهت‌های سمت چپ / راست لبه محتوا در صورتی از ناحیه محتوای عنصر سرریز داشته باشد صورت گیرد
overflow-y	مشخص می‌کند که چه کاری می‌بایست با جهت‌های سمت بالا / پایین لبه محتوا در صورتی از ناحیه محتوای عنصر سرریز داشته باشد صورت گیرد

صفحهٔ بعد»

«صفحهٔ قبل