• 0

كيف أستخدم خاصية float؟

اريد شرح مبسط لاستخدام خاصية float

عند تقسيم ال div 

كيف اعرف ما يجب تحريكه أولا في هذه المربعات ذات اللون الأحمر لأصل في النهاية لهذا الشكل المرتب لها ؟!

FB_IMG_1470592814679.jpg

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

أهلاً بك

الطوفان float: تُعرّف رابطة الشبكة العالمية W3C خاصيّة الطوفان بالشكل التالي:

اقتباس

الطوفان هو انتقال صندوق إلى أحد الجهتين اليسار أو اليمين على الخط الحالي، وأكثر ما يُميّز العنصر الطائف (أو المُطوّف أو الصندوق العائم) كيف أنّ المُحتوى قد ينساب إلى جانبه (أو يُمنع من ذَلِك باستخدام الخاصيّة "clear"). وينساب المُحتوى أسفل الجانب الأيمن من الصندوق عندما يكون مُطوفًا إلى جهة اليسار، وأسفل الجانب الأيسر من الصندوق عندما يكون مطوفًا إلى جهة اليمين.

والـ float لها أربع قيم وهي:

  1. left: حيثُ أنّ المربع سوف يكون في أقصى اليسار.
  2. right: حيثُ أنّ المربع سوف يكون في أقصى اليمين.
  3. none: هي القيمة الافتراضيّة والتي تجعل من العنصر لا يستخدم الطوفان أبدًا.
  4.  inherit:وتجعل القيمة inherit العنصر يرثُ قيمة الطوفان من العنصر الأب الخاص به.

ومن أجل استخدامه بطريقة صحيحة يجب تحديد قيمة عرض وطول مُحددة لكل عنصر.

الآن بالنسبة للصورة التي فوق عرض المُربع هو 1000px، إذًا سوف نُحدد قيمة عرض لكل مربع 250px أو حسب ما تُريد مع استخدام الاكواد التالية float: left or right بالإضافة إلى استخدام margin: left or right وتحديد قيمة عرض width وطول height لكل مربع.

هذا الشرح سوف يُفيدك في أكاديمية حسوب لفهم آلية عمل الطوفان float.

ونصيحة بسيطة يُفضل استخدام احد قوالب المواقع المُعقدة والتي يوجد بها أدوات كثيرة في التخطيط بجانب بعضها من أجل قراءة أكوادها وفهم آلية عملها.

أتمنى أنّ أكون أفدتك.

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

خاصية Float داخل ملف تنسيق css تقبل قيمتين اثنتين left لجعل العنصر يطفو جهة اليسار وقيمة right لجعله جهة اليمين، وهذ مثال عملي لصورة خصصة خاصية folat إلى القيمة right:

دون استعمال خاصية clear:

001.PNG

باستعمال خاصية clear:

002.PNG

يمكنك التعمق في الموضوع من خلال دروس الأكاديمية التالية:

و المصدر:

http://www.w3schools.com/css/css_float.asp

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

حسب علمي ،افضل طريقة لتحقيق الشكل الذي تريده لا يمكن فعله ب float ....اليك مثالا في الصورة الاولى لخاصية float .... وأفضل طريقة لتغيير مكان أي div او اي شيء فخاصية flex تسمح بجعل جميع مكونات ذلك div في سطر واحد و خاصية flex-wrap تسمح برجوع الdiv الى السطر ... ثم تستعمل الخاصيات الاخرى للflex. اذا لم تفلح تواصل معي وساساعدك ان شاء الله.

figure016.gif

<div id="conteneur">
    <div class="element">Elément 1</div>
    <div class="element">Elément 2</div>
    <div class="element">Elément 3</div>
</div>

هذه بدون flex

position_defaut.png

#conteneur
{
    display: flex;
}

وهذه بالflex

flex_defaut.png

#conteneur
{
    display: flex;
    flex-wrap: wrap;
}
هذه للرجوع الى السطر

 

flex_wrap.png

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن