Как бы выравнять кнопки "Добавить в корзину"?

[borus]

Здравствуйте!

 

Вот объект. Какими мерами можно выравнять кнопки "Добавить в корзину" в строках по нижней границе товара с самым большим описанием?

Edited January 30, 2014 by borus

[klierik]

разве что контенту который идет перед кнопкой задать фиксированную высоту

[Evkaky]

Можно и без фиксированной высоты.

Вам нужно, что бы все карточки товаров (.product) в одном ряде были одиннаковой высоты (а именно, высоты равной самой высокой карточке в текущем ряду). При этом, фиксированную высоту мы нигде не задаем!

Например так:

http://jsfiddle.net/W5BBu/

А хотя, в багнутом фаерфоксе мой вариант не работает. Если он вам нужен, то тогда, наверное, задание всем карточкам товаров фиксированной ширины намного оправданее.

Edited January 30, 2014 by Evkaky

[rus]

можно попробовать:

<div class="spacer"> - position: relative;

а:

<div class="addtocart-area"> - position: absolute; bottom: 0;

[borus]

Можно и без фиксированной высоты.

Вам нужно, что бы все карточки товаров (.product) в одном ряде были одиннаковой высоты (а именно, высоты равной самой высокой карточке в текущем ряду). При этом, фиксированную высоту мы нигде не задаем!

Например так:

http://jsfiddle.net/W5BBu/

А хотя, в багнутом фаерфоксе мой вариант не работает. Если он вам нужен, то тогда, наверное, задание всем карточкам товаров фиксированной ширины намного оправданее.

Благодарю. 

Попробовал. Столкнулся с незнанием такой вещи:

Как .spacer сделать по высоте в 100% от родителя .product?

 

heght:100% не помогает

Edited January 31, 2014 by borus

[borus]

разве что контенту который идет перед кнопкой задать фиксированную высоту

и все что не помещается будет скрываться?

В принципе на Озоне на этом не заморачиваются. Надо наверно просто кнопки Добавить в корзину поменьше сделать и не такими заметными...

Edited January 31, 2014 by borus

[klierik]

В моей практике делается следующем образом (и как правило заказчик соглашается).

Область для имени продукта, допустим не может отображатся более чем в 3 строки. Значит блок в котором лежит имя будет иметь высоту равную (line-height * 3). И тут же обрезаем любой избыток overflow:hidden;

По 3 строкам и так будет понятно что это за товар.