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 요소의 하단에 정렬되도록 코드를 업데이트했습니다.