Căn chỉnh dưới hình ảnh HTML bên trong hộp DIV

Question

Tôi có thẻ div có chiều cao cố định. Hầu hết các hình ảnh có cùng chiều cao và chiều rộng.

Tôi muốn căn chỉnh hình ảnh ở dưới cùng của div để chúng được bố trí đẹp mắt. Dưới đây là những gì tôi có cho đến nay:

<div id="randomContainer"> 
    <div id="imageContainer"> 
     <img src="1.png" alt=""/> 
     <img src="2.png" alt=""/> 
     <img src="3.png" alt=""/> 
     <img src="4.png" alt=""/> 
    </div> 
    <div id="navigationContainer"> 
     <!-- navigation stuff --> 
    </div> 
</div> 

CSS trông giống như:

div#imageContainer { 
    height: 160px; 
    vertical-align: bottom; 
    display: table-cell; 
} 

tôi cố gắng sắp xếp những hình ảnh ở dưới cùng với display: table-cell và vertical-align: bottom thuộc tính css.

Có cách nào sạch hơn hơn khi hiển thị div dưới dạng ô bảng và căn chỉnh hình ảnh ở cuối thẻ DIV không?

Answer 1

Đây là mã của bạn: http://jsfiddle.net/WSFnX/

Sử dụng display: table-cell được tốt, với điều kiện là bạn tôi biết rằng nó sẽ không làm việc trong IE6/7. Khác hơn thế, đó là an toàn: Is there a disadvantage of using `display:table-cell`on divs?

Để khắc phục không gian ở phía dưới, thêm vertical-align: bottom đến thực tế img s:

http://jsfiddle.net/WSFnX/1/

Loại bỏ các khoảng trống giữa những hình ảnh nắm này: bikeshedding CSS3 property alternative?

Vì vậy, đây là bản trình diễn có khoảng trống được xóa trong HTML của bạn: http://jsfiddle.net/WSFnX/4/

Answer 2

Đặt phụ huynh div như position:relative và các yếu tố bên trong để position:absolute; bottom:0

Answer 3

Flexboxes có thể thực hiện điều này bằng cách sử dụng align-items: flex-end; flex-direction: column; với display: flex; hoặc display: inline-flex;

div#imageContainer { 
    height: 160px; 
    align-items: flex-end; 
    display: flex; 
    flex-direction: column; 
} 

CSS-Tricks has a good guide for flexboxes

Answer 4

< div> với một số tỷ lệ

div { 
    position relative 
    width: 100%; 
    height: 100%; 
} 

< img> 's với tỷ lệ riêng của họ

img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: auto; /* to keep proportions */ 
    height: auto; /* to keep proportions */ 
    max-width: 100%; /* not to stand out from div */ 
    max-height: 100%; /* not to stand out from div */ 
    margin: auto auto 0; /* position to bottom and center */ 
}