jquery align to bottom in div

Question

Позиция абсолютная не может быть и речи. vertical-align: bottom; display: table-cell; будет работать, НО нужно также сосредоточиться.

Мне нужны изображения внутри div, которые должны быть выровнены снизу. Изображения отличаются по высоте.

Должен ли я просто нацеливать каждое изображение и подсчитывать высоту контейнера и использовать остаток в качестве верхнего поля или есть более легкое решение?

Спасибо!

Answer 1

Вы можете установить свойства «line-height» и «text-align» для div, а затем установить свойство «vertical-align» изображений внутри div.

т.е.

div.images 
{ 
    width: 720px; 
    display: block; 
    text-align: center; 
    line-height: 720px; 
} 
div.images img 
{ 
    vertical-align: bottom; 
} 

Answer 2

Вы не должны позиционировать абсолютное относительно всей страницы. Вы можете просто включить позиционирование контейнера в относительна:

$("#my_id").parent().position(position : "relative"); 

, а затем расположить элемент абсолютно в

$("#my_id").position(position : "absolute", left : ______, top : ______) 

или в CSS,

#my_container { 
    position: relative; 
} 

#my_id { 
    position: absolute; 
    left: __; 
    top: __; 
} 

Answer 3

Вы можете добавить изображение как фона и использование bottom center для позиционирования:

div { 
    background: url("path_to_img") no-repeat bottom center; 
    width: 500px; 
    height: 500px; 
    background-color: #e1e1e1; 
} 

Answer 4

Вам не нужно JQuery для этого:

<div id="wrap"> 
    <img src="img/image.jpg" alt="" /> 
</div> 

#wrap { position: relative; } 
#wrap img { 
    position: absolute; /* display: block is implied */ 
    bottom: 0; 
}