Layout - مثال‌های Float

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی 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 درون جعبه می‌ماند و جعبه شکسته نمی‌شود.

<translate> نکته</translate>  نکته: شما می‌توانید مطالب بیشتری را دراین‌باره در فصل 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 این است که در نسخه ۱۰ مرورگر اینترنت اکسپلور و نسخه‌های قدیمی‌تر کار نمی‌کند.

<translate> نکته</translate>  نکته: می‌توانید مطالب بیشتری را در مورد ماژول 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 که در سمت راست یک پاراگراف

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

تصویری با یک زیرنویس (به انگلیسی: caption) که در سمت راست قرار می‌گیرد

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

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

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

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

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

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

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


منابع آموزشی