مشكلة ارتفاع معرض الصور المصغرة

Question

لدي هذا المعرض للصور المصغرة لمقاطع فيديو YouTube مع عنوانها أسفل.http://skitch.com/subzane/bqgqw/demo

المشكلة التي أواجهها هي أنه عند تعويمها لا تظهر بالشكل الذي أريده، وذلك لأن الارتفاع متغير.لقد قرأت تدوينة منذ بضعة أسابيع لحل هذه المشكلة ولكن لا يمكنني العثور عليها في أي مكان.

لذلك أطلب الرابط الخاص بمنشور المدونة هذا أو محتوياته حقًا :)

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

شكرًا لك

Answer 1

نعم.وبعد ساعات إضافية من البحث على Google، وجدت ما كنت أبحث عنه.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

إنه استخدام للعرض:inline-block الذي يحل مشكلتي.

Answer 2

بدلاً من divs العائمة، يمكنك تبديل الصور المصغرة إلى قوائم (وهو في الواقع أكثر صحة من الناحية الدلالية على أي حال..)

على سبيل المثال:

<style type="text/css">

ul {
    list-type: none;
}

li {
    display: inline;
}
li img {
    vertical-align: top;
    margin-left: 5px;
    padding-bottom: 5px;
}

</style>

<div style="width: 280">
    <ul>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    </ul>
</div>

لمزيد من المرجع، قم بزيارة http://www.alistapart.com/articles/practicalcss/

Answer 3

كم سيختلف الارتفاع حقًا؟إذا كان لن يختلف كثيرًا، فما عليك سوى ضبط الارتفاع على الحد الأقصى؟

بالنسبة للمتصفحات التي تدعم الحظر المضمّن:

على الرغم من أن هنا أ متصفح مضمن عبر الكتلة شرط

#thumbsWrapper div{display:inline-block;vertical-align:top;margin:20px;border:solid 1px #f00;width:180px;}

<div id="thumbsWrapper">
  <div style="height:180px;">
    <img src="thumbnail1.gif" />
  </div>
  <div style="height:240px;">
    <img src="thumbnail2.gif" />
  </div>
  <div style="height:210px;">
    <img src="thumbnail3.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail4.gif" />
  </div>
  <div style="height:300px;">
    <img src="thumbnail5.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail6.gif" />
  </div>
</div>