logo أكاديمية أكسبورت للتطوير والبرمجة logo-alt أكاديمية أكسبورت للتطوير والبرمجة
تسجيل الدخول  أو  تسجيل حساب
  • الرئيسية
  • دروس برمجية
    • HTML
    • CSS
    • ANGULAR
    • IONIC / MOBILE
    • YII 2.0
    • Odoo /epen ERP
    • مواضيع متنوعة
  • مفاهيم برمجية
  • من نحـن
  • اتصل بنا

العناصر العائمة floating in CSS

العناصر العائمة

CSS الصفحة الرئيسية

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

خاصية الطفو  مهمة جدا خصوصا بالنسبة للدين يرغبون بالدخول بمجال تصميم الويب Frontend developers 

فمثلا عندما نود  وضع صورة  ونرغب بوضع نص بجانب تلك الصورة فنحن نحتاج الى تعويم النص

 

title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 

هدا الكود اعلاه سيكون بهدا الشكل

 

<div> // الحاوية الاب
<img style="float: left;" src="image.png" />  // وضع خاصية الطفو لتسمح الصور للعناصر بالطفو بجانبها
<h2>title</h2>  // العناصر التي ستطفى على يسار الصورة
<p><strong>Lorem Ipsum</strong>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing&nbsp;</p>
</div>

 

باختصار وضعنا حاوية بداخلها صورة  و العنوان والنص  اللدان سيطفوان على الصورة

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

 بالأمكان أيضا ان نضع كلاس للصورة ثم نكتب بملف css 

.float-item{
  float:left;
}

 

ولكن مادا لو اردنا ان تطفو الصور على يمين النص؟

هنا يجب ان نعطي خاصية الطفو على اليمين للصورة لكي تنزاح نحو اقصى اليمين  وترفع اليها النص لكي تعومه على يمينها كما في الشكل

 

title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 

 

<div>
<img style="float: right;" src="/uploads/category/21/image-vignette/icons8-css3-100.png"/>
<h2>title</h2>
<p><strong>Lorem Ipsum</strong>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing&nbsp;</p>
</div>

 

في الحقيقة بهدا المثال ليس النص هو الدي يطفو وانما العنصر الدي نعطيه خاصية الطفو هو الدي يطفو (الصورة) 

يمكن تحديد قيم خاصية التعويم : left, right, none

 

طوفان الحاويات DIV

 

DIV1

DIV2

DIV3

 

 

 

 

 

 

 

الكود

<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>

 

التنسيق

.box{ 
  float: left;
  width: 200px;
  height: 200px;
}

.red{ 
  background:red;
}

.green{ 
  background:green;
}

.blue{ 
  background:blue;
}

 

باختصار قمنا بتحديد خاصية الطفو لجميع الحاويات divs  لكي تطفو الواحدة تلو الاخرى لكن حددنا مساحة للحاويات تقدر ب 200 بكسل

لان الحاويات بشكلها الافتراضي تأخد كامل عرض الصفحة من اليمين الى اليسار وبالتالي لن تعمل خاصية الطفو في حال ما ادا استولى العنصر كل عرض الصفحة لانه لايوجد مكان يسمح للعناصر بالطوفان بها.لهدا السبب حددنا عرض الحاوية ب 200 بكسل حتى تتسع مساحة عرض الصفحة للحاويات الثلاثة بسطر واحد

 

 

 

ماهو تقييمك للدرس
تقييم الزوار للدرس
الدرس السابق : الخطوط -الأحجام - السمك - خطوط Google Fonts الدرس القادم : display inline block
  • قم بتسجيل الدخول للتعليق : تسجيل الدخول أو تسجيل عضوية
الدروس المقبلة
  • display inline block
    خاصية display
  • Positions : Relative & absolute
    تموضع العناصر
ANGULAR
  • المستوى 101 من دورة angular
  • المستوى 102 من دورة angular
  • الدورة 103 من angular
Mobile Development
دورة تطوير تطبيق موبايل

sitemap - Exportdeveloper Academy © 2019 All rights reserved