أنت تستخدم عرضًا ثابتًا للأعمدة مع خاصية float، ببساطة أنت تقول للمتصفح: أريد أن تكون هذه الأعمدة بعرض 379px مهما كان عرض نافذة المتصفح، سينفذ المتصفح ما تريده بالضبط، وعندما لا تتوفر مساحة كافية فإن الأعمدة ستنزل واحدة بعد الأخرى بحسب ترتيبها في صفحة HTML.
ما ترغب بفعله هو استخدام أعمدة عرضها نسبي، هناك عدة حلول:
- باستخدام خصائص الجداول في CSS، سيعامل المتصفح المحتوى كأنه جدول، ومن خلال هذا يمكننا تحديد عرض متساوي ونسبي لكل أعمدة الجدول. هذا الحل الأكثر شيوعًا في مواقع الويب وهو مدعوم بشكل جيد جدًا على معظم المتصفحات، بما فيها القديمة.
ها هنا مثال سريع:
بالطبع بإمكانك استخدام إطار عمل يتولى مهمة رصف العناصر في الصفحة، ويعطيك مظهر وخصائص أكثر لو كنت تنوي بناء مشروع أكبر، أنصحك باستخدام Bootstrap. اطلع على grid التي يقدمها:
- الحل الثاني يستخدم خاصية جديدة في CSS تُدعى Flexbox Model، وهي تسمح بمرونة وسهولة أكبر في تحقيق نفس الغاية، لكنها تحتاج إلى متصفح حديث.
ها هنا مثال سريع باستخدام Flexbox:
ها هنا دليل كامل
وبإمكانك استخدام مكتبة مثل Flexbox Grid لتسهيل العمل:
التعليقات