CSS 13

الدرس 13: تعويم العناصر (floats)

العناصر يمكن تعويمها إلى اليمين أو اليسار باستخدام الخاصية float، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة، أو من ستعوم إلى إحدى الجهتين ضمن عنصر صندوق آخر، أنظر الدرس 9 للمزيد حول نموذج الصندوق، المثال التالي يوضح مبدأ تعويم العناصر:

كيف يمكن فعل ذلك؟

ملف HTML للمثال أعلاه سيكون بهذا الشكل:

idciro etiam nostrarum voluntatum...

causas naturales et antecedentes,

لكي نجعل الصورة تطفو إلى اليسار والنص يحيط بها فعليناً أولاً تحديد عرض الصندوق المحيط بالصورة ثم نعطي للخاصية float القيمة left:

 

 #picture {

  float:left;

  width: 100px;

 }

 

 

• شاهد المثال

مثال آخر: الأعمدة

خاصية التعويم يمكن استخدامها للأعمدة في الصفحة، لإنشاء عمود عليك ببساطة أن تضع هيكلية للأعمدة في HTML باستخدام 

 كما يلي:

 

 




  Haec disserens qua de re agatur

  et in quo causa consistat non videt...

idciro etiam nostrarum voluntatum...

causas naturales et antecedentes,

potestate si res ita se haberet...

nam nihil esset in nostra

الآن عرض العمود الذي نريد هو 33% ويمكننا ببساطة أن نعوم كل الأعمدة إلى اليسار باستخدام الخاصية float:

 

 #column1 {

  float:left;

  width: 33%;

 }

 #column2 {

  float:left;

  width: 33%;

 }

 #column3 {

  float:left;

  width: 33%;

 }

 

 

• شاهد المثال

float يمكن أن تحمل القيمة left أو right أو none.

الخاصية clear

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

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

الخاصية clear يمكنها أن تحمل القيمة left أو right أو both أو none، المبدأ هنا إذا وضعنا لخاصية clear قيمة "both" مثلاً فإن الحاشية العلوية للعنصر ستصبح أسفل الحاشية السفلية لعنصر يعلوه.

Bill Gates

class="floatstop">causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...

إذا لم ترغب في أن يلتف النص حول الصورة يمكنك إضافة هذه الخاصية في CSS:

 

 #picture {

  float:left;

  width: 100px;
}


  clear:both;
.floatstop {

 }

 

 

• شاهد المثال

ملخص

التعويم مفيد في حالات كثيرة، ويستخدم غالباً مع وضعية العناصر، في الدرس اللاحق سنلقي نظرة على كيفية وضع العناصر في مكان ما بشكل نسبي أو مطلق.