محاذاة قائمة الصور باستخدام CSS

Question

أرغب في محاذاة قائمة الصور "أسفل"، كيف يمكنني تحقيق ذلك باستخدام CSS؟

الخلفية: أريد محاذاة مجموعة من الصور إلى أسفل، والصور موجودة بأحجام مختلفة.

<div>
  <ul>
    <li> <!-- image 1-->
    <li> <!-- image 2-->
    <li> <!-- image 3-->
  </ul>
</div>

شكرًا.

Answer 1

المشكلة في كل هذه المواقع المطلقة هي أن عناصر LI لن يكون لها أي ارتفاع، لأن عنصر الصورة مطلق ولا يدفع أي تخطيط بعد الآن. عادة ما يكون حلا سيئا.

اعتمادا على ما تحتاجه، هذا يمكن أن يعمل:

li {
  display: inline;
  vertical-align: bottom;
}

مثال حي هنا: http://mooshell.net/zbcgw/

Answer 2

ul{ li-style-type: none;}

li{position:relative; float: left; width:100px; height: 100px; }

li img { display: block; position: absolute; bottom: 0; }

ثم

<ul> <li><img /></li>...</ul>

Answer 3

يجب على CSS التالية أن تفعل الخدعة:

ul{ li-style-type: none;}

li img {position:absolute;bottom:0;}

li {float:left;vertical-align:bottom;}

Answer 4

فقط حاول تجربة هذا:

li img{
    position:absolute;
    bottom:0;
}
li{
    position:relative;
}

تحرير: قرأت للتو أنهم يهدفون إلى الانحياز إلى أسفل عنصر LI. لقد قمت بتحديث الرمز حتى يتم محاذاة IMG إلى أسفل عنصر LI.