كيفية ترتيب العناصر ذات الطول المتنوع في مساحة يمكن تغيير حجمها في CSS؟

Question

أرغب في ترتيب العناصر تقريبًا مثل هذا:

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

في الأساس عناصر ذات أطوال مختلفة مرتبة في جدول مثل الهيكل.الجزء الصعب هو أن الحاوية الخاصة بهذه العناصر يمكن أن تختلف في الحجم وأرغب في احتواء أكبر عدد ممكن منها في كل صف - وبعبارة أخرى، لن أعرف مسبقًا عدد العناصر التي تناسب السطر، وما إذا كانت الصفحة تم تغيير حجم العناصر التي يجب أن تعيد تدفق نفسها لاستيعابها.على سبيل المثالفي البداية يمكن احتواء 10 عناصر في كل سطر، ولكن عند تغيير الحجم يمكن تقليلها إلى 5.

لا أعتقد أنه يمكنني استخدام جدول html لأنني لا أعرف عدد الأعمدة (لأنني لا أعرف عدد الأعمدة التي تناسب السطر).يمكنني استخدام CSS لتعويمها، ولكن نظرًا لاختلاف حجمها فلن تصطف.

الشيء الوحيد الذي يمكنني التفكير فيه حتى الآن هو استخدام جافا سكريبت للحصول على حجم أكبر عنصر، وتعيين حجم جميع العناصر على هذا الحجم، وتعويم كل شيء متبقي.

أي اقتراحات أفضل؟

Answer 1

يمكن القيام بذلك باستخدام عناصر div العائمة، وحساب الحد الأقصى للعرض، وتعيين كافة العروض إلى الحد الأقصى.إليك كود jquery للقيام بذلك:

لغة البرمجة:

<div class="item">something</div>
<div class="item">something else</div>

المغلق:

div.item { float: left; }

مسج:

var max_width=0;
$('div.item').each( function() { if ($(this).width() > max_width) { max_width=$(this).width(); } } ).width(max_width);

ليست قبيحة جدًا ولكن ليست جميلة جدًا أيضًا، ما زلت منفتحًا على اقتراحات أفضل ...

Answer 2

ماذا يحدث عندما تحصل على قطعة واحدة كبيرة الحجم بشكل سخيف وتجعل الباقي يبدو صغيرًا؟سأفكر في حلين:

1. ما توصلت إليه بالفعل يتضمن float:left;القاعدة وjQuery، ولكن بحد أقصى max_width أيضًا أو
2. ما عليك سوى تحديد عرض محدد مسبقًا لجميع العناصر مسبقًا، بناءً على القيم التي تتوقع وجودها هناك

ثم قم بإضافة تجاوز السعة:خفي؛القاعدة بحيث لا تفسد العناصر الأطول مظهر الطاولة.يمكنك أيضًا تغيير وظيفة jQuery لقص العناصر الأطول، وإضافة علامة القطع (...) إلى النهاية.

Answer 3

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

يحرر:ما عليك سوى قراءة النصف الثاني من مشاركتك، ولاحظت أنك اقترحت هذا الإصلاح فقط.احسب هذه المشاركة كـ +1 لفكرتك الحالية :)

Answer 4

ستحتاج في الواقع إلى حساب maxWidth وmaxHeight ثم متابعة وظيفة تغيير الحجم في Javascript بعد تحميل الصفحة.اضطررت إلى القيام بذلك لمشروع سابق وسيقوم أحد المتصفحات (FF؟) بتعطيل/إزاحة المتصفحات الموجودة أسفلها إذا كان ارتفاع div مختلفًا.

Answer 5

حسنًا، هل يمكنك فقط إنشاء قسم عائم لكل "عنصر"، وتكرار خصائصه واستخدام فواصل الأسطر؟ثم عند الانتهاء من تكرار الخصائص، أغلق div وابدأ واحدة جديدة؟بهذه الطريقة سيكونون مثل الأعمدة ويطفوون بجانب بعضهم البعض.إذا كانت النافذة صغيرة، فسوف تنخفض إلى "السطر" التالي وعند تغيير حجمها، سوف تطفو مرة أخرى إلى اليمين (وهو اليسار حقًا :-)

Answer 6

يمكنك طرح بضع قوائم غير مرتبة، مثل هذا:

<ul style="float: left;">
    <li>Short</li>
    <li>Loooong</li>
    <li>Even longer</li>
</ul>
<ul style="float: left;">
    <li>Loooong</li>
    <li>Short</li>
    <li>...</li>
</ul>
<ul style="float: left;">
    <li>Semi long</li>
    <li>...</li>
    <li>Short</li>
</ul>

سيتطلب الأمر منك إجراء بعض الحسابات حول عدد عناصر القائمة وعدد القوائم التي يجب وضعها في DOM، ولكن بهذه الطريقة - عندما تقوم بإعادة حجم الحاوية التي تحتوي على القوائم - ستطفو القوائم لتلائم تلك الحاوية .

Answer 7

يمكنك استخدام ما يلي مع كل عمود بنفس العرض.

سيكون لديك عرض عمود ثابت، ولكن القائمة ستعيد تدفق نفسها تلقائيًا.لقد أضفت القليل من HTML الإضافي ولكنه يعمل الآن في FF en IE.

لغة البرمجة:

<ul class="ColumnBasedList">
  <li><span>Item1 2</span></li>
  <li><span>Item2 3</span></li>
  <li><span>Item3 5</span></li>
  <li><span>Item4 6</span></li>
  <li><span>Item5 7</span></li>
  <li><span>Item6 8</span></li>
</ul>

المغلق:

.ColumnBasedList
{
    width: 80%;
    margin: 0;
    padding: 0;
}

.ColumnBasedList li
{
    list-style-type: none;
    display:inline;
}

.ColumnBasedList li span
{
    display: -moz-inline-block;
    display: inline-block;
    width: 20em;
    margin: 0.3em;
}