• 0

كيف أضبط عرض div مع عرض div المُحتوي لها؟

لدي ملف html بالبنية التالية:

<div class = "x" style="width:100%;">
    <div class = "y" style="width:50%;float:left;">
        <div class = "z" style="width:100%;">
        </div>
    </div>
    <div class = "yy" style="width:50%;float:right;">
        <div class = "zz" style="width:100%;">
        </div>
    </div>
</div>

أريد ضبط عرض العناصر ذات الكلاس Z و ZZ مع عرض العنصر ' Parent الأب' المُحتَوي X عن طريق css3، كيف ذلك؟

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


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

سنستعمل قيمتي relative وَ absolute للتمكن من ذلك:

.x{
position: relative;
}
.z{
position: absolute ;
top:0;
left:0;
width:100%;
}

ويمكن استعمال خاصية الوراثة inherit داخل ملف css، والتي تمكن عنصر من استخلاص قيمة خاصية معينة من العنصر المُحتوي له:

  • كود html:
<div class = "x">
   <div class = "y">
       <div class = "z">
       </div>
   </div>
</div>
  • كود ملف التنسيق css:
.x
{
width:100px; 
border:1px solid red;
height:100px;
}

.z{
width:inherit; 
border:1px solid green;
height:100px;
}

 

مثال تطبيقي.

تمّ تعديل بواسطة E.Nourddine

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


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

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

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

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


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

تسجيل الدخول

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


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