اذهب إلى المحتوى
  • 0

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

Soma

السؤال

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

عند تقسيم ال div 

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

FB_IMG_1470592814679.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...