سؤال في ال FlexBox

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

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

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

index.html

style.css

بتاريخ 2 ساعات قال محمد أبو عواد:

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

index.html

style.css

بتاريخ 29 دقائق مضت قال Muhammad GAD:

 

index.html

style.css

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

بتاريخ الآن قال محمد أبو عواد:

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

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

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

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

بتاريخ 2 ساعات قال Muhammad GAD:

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

index.html

style.css

حتى تتمكن من إظهار الصورة بجانبها عنوان المقال وتحت العنوان أسم المؤلف تحتاج إجراء بعض التغييرات على 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%;
  }

...