مثال شناور CSS

این صفحه مثال‌های معمول فلوتی را ارائه می‌دهد.

گرید / قاب‌های هم عرض

Box 1
Box 2
Box 1
Box 2
Box 3

با استفاده از float ویژگی، به شما اجازه می‌دهد تا به راحتی محتوای فلوتی به صورت موازی ایجاد کنید:

مثال

* {
  box-sizing: border-box;
}
.box {
  شناور: چپ;
  width: 33.33%; /* سه قاب (چهار قاب از 25% استفاده می‌کنند، دو قاب از 50% استفاده می‌کنند و غیره) */
  padding: 50px; /* اگر می‌خواهید فاصله‌ای بین تصاویر اضافه کنید */
}

به طور شخصی امتحان کنید

box-sizing چیست؟

شما می‌توانید به راحتی سه قاب فلوتی به صورت موازی ایجاد کنید. اما، وقتی محتوایی را اضافه می‌کنید تا عرض هر قاب را گسترش دهید (مثلاً پادینگ یا لبه)، این قاب می‌شکند. box-sizing ویژگی‌ها به ما اجازه می‌دهند تا پادینگ و لبه‌ها را در عرض کل قاب (و ارتفاع) شامل کنیم، تا اطمینان حاصل شود که پادینگ در داخل قاب باقی می‌ماند و نمی‌شکند.

شما می‌توانید در CSS Box Sizing در این فصل، بیشتر درباره ویژگی box-sizing یاد خواهید گرفت.

تصاویر موازی

این نوع قاب‌ها (The grid of boxes) همچنین می‌توانند برای نمایش موازی تصاویر استفاده شوند:

مثال

.img-container {
  شناور: چپ;
  width: 33.33%; /* سه قاب (چهار قاب از 25% استفاده می‌کنند، دو قاب از 50% استفاده می‌کنند و غیره) */
  padding: 5px; /* اگر می‌خواهید فاصله‌ای بین تصاویر اضافه کنید */
}

به طور شخصی امتحان کنید

قاب‌های هم عرض

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

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

مثال

.box {
  ارتفاع: 500px;
}

به طور شخصی امتحان کنید

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

مثال

با استفاده از Flexbox یک جعبه انعطاف‌پذیر ایجاد کنید:

Box 1 - این‌ها چندین متن هستند تا مطمئن شویم که محتوا واقعاً بلند است. این‌ها چندین متن هستند تا مطمئن شویم که محتوا واقعاً بلند است. این‌ها چندین متن هستند تا مطمئن شویم که محتوا واقعاً بلند است. این‌ها چندین متن هستند تا مطمئن شویم که محتوا واقعاً بلند است. این‌ها چندین متن هستند تا مطمئن شویم که محتوا واقعاً بلند است.
Box 2 - ارتفاع من دنبال Box 1 خواهد رفت.

به طور شخصی امتحان کنید

تنها مشکل Flexbox این است که در نسخه‌های 10 یا قدیمی‌تر اینترنت اکسپلورر کار نمی‌کند. می‌توانید در CSS Flexbox در فصل یاد بگیرید که بیشتر درباره ماژول‌های طرح Flexbox بدانید.

منوی ناوبری

کمک float با استفاده از لیست‌های پیوند به ایجاد منو افقی بپردازید:

مثال

به طور شخصی امتحان کنید

مثال‌های طرح وب

استفاده float ویژگی‌ها معمولاً برای تکمیل طرح وب استفاده می‌شوند:

مثال

.header, .footer {
  رنگ پس‌زمینه: خاکستری;
  رنگ: سفید;
  پدینگ: 15px;
}
.column {
  شناور: چپ;
  پدینگ: 15px;
}
.clearfix::after {
  محتوای: "";
  پاکسازی: هر دو;
  نمایش: جدول;
}
.menu {
  عرض: 25%;
}
.content {
  عرض: 75%;
}

به طور شخصی امتحان کنید

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

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

تمام ویژگی‌های شناور CSS

ویژگی وصف
box-sizing تعریف روش محاسبه عرض و ارتفاع عناصر: آیا باید پدینگ و لبه‌ها را شامل شوند؟
clear مخصوصی کا استعمال کریں، جس طرح سے کسی عنصر کو پاک کیا جائے، جس کے ساتھ یہ فلاٹ کردیا جائے اور کس طرف جائے۔
float مخصوصی کا استعمال کریں، جس طرح سے عنصر کو فلاٹ کردیا جائے۔
overflow مخصوصی کا استعمال کریں، جب محتوا کسی عنصر کے کیس کے باہر آتا ہے تو، اس صورت میں کیا ہوگا۔
overflow-x مخصوصی کا استعمال کریں، جب کسی عنصر کا محتوا برون نکالنے کی اجازت نہیں دی جاتی تو، محتوا کی اور برون نکالنے کی سرحد کو کس طرح سے ہاتل دیا جائے۔
overflow-y مخصوصی کا استعمال کریں، جب کسی عنصر کا محتوا برون نکالنے کی اجازت نہیں دی جاتی تو، محتوا کی اور برون نکالنے کی سرحد کو کس طرح سے ہاتل دیا جائے۔