Auto Align кнопки

Question

Привет

На нашем сайте у меня есть страница, где есть Купить сейчас кнопки

https://www.nutricentre.com/m-300-herbs-hands-healing.aspx

стилизации, который контролирует это

.item .price { 
    color:#8c9c54; 
    font-size:14px; 
    font-weight: bold; 
    /*  
     position: absolute; 
     bottom: 48px; 
     left: 0px; 
     width: 150px; 
    */ 
    text-align: center; 
    margin-bottom: 45px; 
} 


.item a.blue_btn { 
    position: absolute; 
    bottom: 10px; 
    left: 15px; 
    cursor: pointer; 
} 

Любая идея, как Я могу выровнять это по прямой, независимо от текста выше?

Answer 1

Я бы рекомендовал установить min-height: 370px; для самого простого решения.

Вы не хочу установить статическую высоту для этого, потому что, если у вас есть элемент с более подробным описанием не будет автоматически добавлять пространства, а просто втиснуть все в.

Answer 2

Вы не должны изменить CSS кнопки, но от всего элемента: просто добавить:

.item{ 
    height: 380px; 
} 

Конечно, вы должны заботиться о максимальном элементе высоте: ваше значение не должно быть меньше, или цена больше не будет видна.

В этом случае min-height будет лучшей альтернативой.

Answer 3

Добавить статическую высоту .item

height:375px; 

Высота: авто; декларация сообщает .item расширяться настолько, насколько это необходимо, чтобы соответствовать всем, поэтому вершины divs выстраиваются в линию, но поскольку они различаются по высоте, днища расположены в шахматном порядке.

Как отмечали некоторые мои соавторы, минимальная высота также является приемлемой опцией, пока у вас не будет элемента с достаточным текстом, который элемент будет расширяться за минимальное значение, и в этот момент они начнут расширяться и снова пошатывайтесь.

Answer 4

Это должно направить вас в правильном направлении: http://jsfiddle.net/v9grm/

Создать сетку и с помощью display: table сделать столбцы одинаковую высоту. Затем поместите кнопку в нижней части колонки с position: absolute.