Layout - مثال‌های Float

از موتو کد، دانشنامهٔ برنامه‌نویسی

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

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

مثال
* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
}

Box-sizing چیست؟

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

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

تصاویر کنار هم[ویرایش | ویرایش]

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

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

جعبه هایی با ارتفاع برابر[ویرایش | ویرایش]

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

مثال
.box {
  height: 500px;
}

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

مثال[ویرایش | ویرایش]

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

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

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

منوی navigation (به فارسی: ناوبری)[ویرایش | ویرایش]

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

مثال چیدمان وب[ویرایش | ویرایش]

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

مثال
.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

مثال های بیشتر[ویرایش | ویرایش]

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

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

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

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

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

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

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

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

تمامی ویژگی‌های float در CSS[ویرایش | ویرایش]

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

منابع آموزشی[ویرایش]