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

السؤال

نشر

لدي ملف 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، كيف ذلك؟

Recommended Posts

  • 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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...