مثال على الغرق في CSS

يقدم هذا الصفحة أمثلة شائعة للاستخدام الفlotting.

شبكة / مربعات متساوية العرض

Box 1
Box 2
Box 1
Box 2
Box 3

من خلال استخدام float الخاصية يمكن استخدامها بسهولة لت浮动 المحتويات بشكل متساوي:

مثال

* {
  box-sizing: border-box;
}
.صندوق {
  تدحرج: اليسار;
  width: 33.33%; /* ثلاثة مربعات (أربعة مربعات باستخدام 25%، أثنان باستخدام 50% وما إلى ذلك) */
  padding: 50px; /* إذا كنت بحاجة إلى إضافة مسافة بين الصور */
}

تجربة شخصية

ما هو box-sizing؟

يمكنك بسهولة إنشاء ثلاثة مربعات ت浮动 بشكل متساوي. ولكن، عندما تضيف بعض المحتويات لتوسيع عرض كل مربع (مثل المداخل والهوامش)، يتم تدمير هذا المربع. box-sizing الخاصية تسمح لنا بضم الارتفاع والعرض الإجمالي للمربعات (والبعد) مع المداخل والهوامش، مما يضمن أن تبقى المداخل داخل المربعات دون تمزق.

يمكنك زيارة Box Sizing في CSS في هذا الفصل، تعلمنا المزيد عن خاصية box-sizing.

صور متساوية

يمكن استخدام هذا الشبكة (The grid of boxes) أيضًا لعرض الصور بشكل متساوٍ:

مثال

.img-container {
  تدحرج: اليسار;
  width: 33.33%; /* ثلاثة مربعات (أربعة مربعات باستخدام 25%، أثنان باستخدام 50% وما إلى ذلك) */
  padding: 5px; /* إذا كنت بحاجة إلى إضافة مسافة بين الصور */
}

تجربة شخصية

المربعات المتساوية العرض

في هذا المثال، تعلمنا كيفية ت浮动 المربعات بشكل متساوٍ في العرض. ولكن، إن إنشاء مربعات ت浮动 بنفس الارتفاع ليس سهلاً. ومع ذلك، الحل السريع هو تعيين الارتفاع ثابت، كما هو موضح في المثال التالي:

Box 1

بعض المحتويات، بعض المحتويات، بعض المحتويات

Box 2

بعض المحتويات، بعض المحتويات، بعض المحتويات

بعض المحتويات، بعض المحتويات، بعض المحتويات

بعض المحتويات، بعض المحتويات، بعض المحتويات

مثال

.صندوق {
  ارتفاع: 500PX;
}

تجربة شخصية

لكن هذا يفقد المرونة. إذا كان يمكنك التأكد من أن هناك دائمًا نفس عدد المحتويات في الصندوق، يمكن أن يكون ذلك جيدًا. لكن في كثير من الأحيان، المحتويات ليست متشابهة. إذا قمت بتجربة المثال السابق على الهاتف الذكي، سترى أن محتويات الصندوق الثاني تظهر خارج الصندوق. هذا هو مكان تأثير CSS3 Flexbox - لأنه يمكنه تمدد الصندوق تلقائيًا ليتناسب مع أطول صندوق:

مثال

إنشاء وحدة التخطيط المرنة باستخدام Flexbox:

Box 1 - هذا نص لضمان أن المحتوى حقًا مرتفع. هذا نص لضمان أن المحتوى حقًا مرتفع. هذا نص لضمان أن المحتوى حقًا مرتفع. هذا نص لضمان أن المحتوى حقًا مرتفع. هذا نص لضمان أن المحتوى حقًا مرتفع.
Box 2 - طولي سيتبع Box 1.

تجربة شخصية

النقطة الوحيدة لـ Flexbox هي أنه لا يعمل في إصدارات Explorer 10 أو أقدم. يمكنك زيارة موقعنا Flexbox في CSS تعلم المزيد عن وحدة التخطيط Flexbox في هذا الفصل.

قائمة التوجيه

تحويل float استخدام مع قائمة الروابط لإنشاء قائمة تحديد أفقي:

مثال

تجربة شخصية

مثال تصميم الموقع الإلكتروني

استخدام float خصائص تكتمل في تصميم الموقع الإلكتروني أيضًا شائعة:

مثال

.الرأس، .القدم {
  لون الخلفية: رمادي;
  لون: أبيض;
  ملء: 15PX;
}
.حالة {
  تدحرج: اليسار;
  ملء: 15PX;
}
.clearfix::after {
  المحتوى: "";
  جعل كل شيء صافي;
  عرض: جدول;
}
.menu {
  عرض: 25%;
}
.content {
  عرض: 75%;
}

تجربة شخصية

مزيد من الأمثلة

صورة مع هامش وخلفية تتدحرج إلى اليمين في الفقرة
اتجاه الصورة إلى اليمين في الفقرة. أضف هامشًا وخلفية إلى الصورة.
صورة مع العنوان تتدحرج إلى اليمين
اتجاه الصورة مع العنوان إلى اليمين.
اتجاه الابتدائية في الفقرة إلى اليسار
اتجاه الابتدائية في الفقرة إلى اليسار مع تعيين نمط الحرف.
إنشاء موقع باستخدام المتدحرجة
استخدام المتدحرجة لإنشاء صفحة رئيسية تحتوي على قائمة تحديد أفقي، رأس الصفحة، قدم الصفحة، قائمة تحديد الجانب الأيسر و المحتوى الرئيسي.

جميع خصائص CSS المتدحرجة

خصائص وصف
box-sizing تحديد طريقة حساب عرض العنصر وارتفاعه: هل يجب أن يشمل الهوامش الداخلية والهوامش؟
clear تحديد العناصر التي يمكن أن تكون بجانب العنصر المزيل وتحديد الجانب الذي سيتم فيه السحب
float تحديد كيفية السحب للعناصر
overflow تحديد ما سيحدث إذا تجاوز المحتوى كتلة العنصر
overflow-x تحديد كيفية التعامل مع الحواف اليسرى واليمنى للمحتوى عند تجاوز منطقة العنصر
overflow-y تحديد كيفية التعامل مع الحواف العلوية والسفلية للمحتوى عند تجاوز منطقة العنصر