ترتيب عناصر html باستخدام css

يمكنك وضع الصور الثلاثة الأولى في حاوية div لوحدها ونعطي الحاوية الخاصية display وقيمتها flex , والخاصية flex-direction وقيمتها column لكي تعرض الصور بشكل عمودي كالتالي

<div style="display: flex; flex-direction: column;">
        <div class="img">
          <img src="../simone/projects/project-1.jpg" alt="pic" />
        </div>
        <div class="img">
          <img src="../simone/projects/project-4.jpg" alt="pic" />
        </div>
        <div class="img">
          <img src="../simone/projects/project-7.jpg" alt="pic" />
        </div>
      </div>

والصورة التي في المنتصف توضع في حاوية لوحدها أيضا ولها نفس التنسيقات كالتالي

      <div style="display: flex; flex-direction: column;">
        <div class="img">
          <img src="../simone/projects/project-2.jpg" alt="pic" />
        </div>
      </div>

والحاوية الاخيرة نفس الحاوية الأولى ونفس التنسيقات , بعد تنفيذ الأكواد سوف يصبح الشكل لديك , 


سبب ظهور الصور بهذا الحجم لانك أعطيتها عرض 30% فقط , لاحظ

.portfolio .imgs-sec .img {
  width: 30%;
}

سوف نحذف التنسيق ثم حدث الصفحة
 

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

يمكنك وضع الصور الثلاثة الأولى في حاوية div لوحدها ونعطي الحاوية الخاصية display وقيمتها flex , والخاصية flex-direction وقيمتها column لكي تعرض الصور بشكل عمودي كالتالي

<div style="display: flex; flex-direction: column;">
        <div class="img">
          <img src="../simone/projects/project-1.jpg" alt="pic" />
        </div>
        <div class="img">
          <img src="../simone/projects/project-4.jpg" alt="pic" />
        </div>
        <div class="img">
          <img src="../simone/projects/project-7.jpg" alt="pic" />
        </div>
      </div>

والصورة التي في المنتصف توضع في حاوية لوحدها أيضا ولها نفس التنسيقات كالتالي

      <div style="display: flex; flex-direction: column;">
        <div class="img">
          <img src="../simone/projects/project-2.jpg" alt="pic" />
        </div>
      </div>

والحاوية الاخيرة نفس الحاوية الأولى ونفس التنسيقات , بعد تنفيذ الأكواد سوف يصبح الشكل لديك , 


سبب ظهور الصور بهذا الحجم لانك أعطيتها عرض 30% فقط , لاحظ

.portfolio .imgs-sec .img {
  width: 30%;
}

سوف نحذف التنسيق ثم حدث الصفحة
 

شكراً لك