مثال شناور 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

برخی از محتوا، برخی از محتوا، برخی از محتوا

Box 2

برخی از محتوا، برخی از محتوا، برخی از محتوا

برخی از محتوا، برخی از محتوا، برخی از محتوا

برخی از محتوا، برخی از محتوا، برخی از محتوا

مثال

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

به طور مستقیم امتحان کنید

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

مثال

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

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

به طور مستقیم امتحان کنید

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

منوی ناوبری

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

مثال

به طور مستقیم امتحان کنید

مثال‌های قالب‌بندی وب

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

مثال

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

به طور مستقیم امتحان کنید

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

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

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

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