سؤال في css بخصوص float

كان هناك لي حديث مع @assassinateur في صفحة اسالني -للأسف :(- الخاصة به توصلنا إلى حل باستخدام css، أتذكر أنه قام باخر تتطوير عليه ورفعه على أحد مواقع رفع الشيفرات لا أتذكره، أتمنى أنه يزال يملكه.

أفهم ما تريده بالضبط .. وقد صارت معي هذه المشكلة والحل هو بالإبتعاد كلياً عن خاصية float .. الطريقة كالتالي:

العنصر الكونتينر container او الأب .. من خلاله تحدد إتجاه العناصر بالنسبة للعنصر الإبن direction:rtl = float:right و direction:ltr = float:left.. مثل ما قلنا الدايركشن نتيجته للعنصر الإبن وليس الأب

أما العنصر الإبن فببساطة أعطه الخصائص التالية في css .. ـ

display: inline-block
vertical-align: top (or bottom)

ملاحظة مهمة بما أن العنصر الإبن له خاصية ال inline بالتالي سيأخذ خصائص النص في المسافة وبالتالي تنسيق الكود لن يجدي نفعاً .. مثال

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>

خاطئة .. والصحيح

<div class="parent"><div class="child"></div><div class="child"></div><div class="child"></div></div>

وإذا الطريقة التي شرحتها ليست هي المقصودة .. فبالتأكيد أنت تقصد الـ Masonry على الرابط:

لا اعرف مشكلتك بالتحديد لان صفحة المثال تعمل بشكل جيد , على كل حال في float هناك عيب وحيد لاحظته لها هو اختفاء الخلفية احيانا من الصناديق الفرعية الحل كان بوضع هذه الخاصي لدى الصندوق الاب

   div{overflow-x:hidden;}

اخي الحبيب انت بحاجة لاستخدام تقنية flex box للقيام بهذا التماثل في ارتفاع الصناديق واعتماد ارتفاع الصندوق الاطول في الصف .

هذا المثال بالضبط ما تريده

يمكنك ايضاً القراءة اكثر عن هذه الطريقة هنا