سؤال في ال FlexBox

هل هذا السؤال متعلق بأحد الدورات في الاكاديمية؟

أرسل لنا الكود كاملا لنستطيع مساعدتك على الوجه الصحيح

معذرةً لقد نسيت إرسالة في الأعلي

index.html

style.css

  بتاريخ On 28‏/9‏/2022 at 08:18 قال محمد أبو عواد:

هل هذا السؤال متعلق بأحد الدورات في الاكاديمية؟

أظهر المزيد  

index.html

style.css

  بتاريخ On 28‏/9‏/2022 at 11:01 قال Muhammad GAD:

 

index.htmlFetching info...

style.cssFetching info...

أظهر المزيد  

هل أنت طالب في الاكاديمية؟ هل هذه المشكلة متعلقة بأحد دورات الاكاديمية؟

  بتاريخ On 28‏/9‏/2022 at 11:31 قال محمد أبو عواد:

هل أنت طالب في الاكاديمية؟ هل هذه المشكلة متعلقة بأحد دورات الاكاديمية؟

أظهر المزيد  

نعم .. أنا طالب في دورة تطوير واجهات المُستخدم

وما زلت لم أنتهي من الدورة بعد

وهذه المشكلة حدثت أثناء تدريني علي ال FlexBox

  بتاريخ On 28‏/9‏/2022 at 09:37 قال Muhammad GAD:

معذرةً لقد نسيت إرسالة في الأعلي

index.htmlFetching info...

style.cssFetching info...

أظهر المزيد  

حتى تتمكن من إظهار الصورة بجانبها عنوان المقال وتحت العنوان أسم المؤلف تحتاج إجراء بعض التغييرات على html في عناصر li مع إضافة صنفين css جديدين

...
<li class="related-post">
    <div class="item-container">
        <!-- وضع الصورة مع المعلومات الأخرى في صف  -->
        <img
            src="img/laura-jones.jpg"
            alt="Lightning"
            width="75"
            height="75"
        />
        <div class="item-info-container">
            <!-- وضع العنوان وإسم المؤلف في عمود -->
            <a href="#" class="related-link">The Unknown Powers of CSS</a>
            <p class="related-author">By Jim Dillon</p>
        </div>

    </div>
</li>
...
/* تعريفات الأصناف المرتبطة بالتغييرات المشروحة أعلاه */
.item-container{
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .item-info-container{
    display: flex;
    flex-direction: column;
    width: 100%;
  }

...