Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Помощь с CSS


BeTep2

Recommended Posts

Добрый день!

Вывел рекомендуемые  товары в карточке снизу. Все красиво и ровно до того момента как не попадается товар с длинным названием, который смещает рамки, кнопку покупки и т.д. Получается кривая, не красивая лесенка. Возможно кто подскажет как подправить.

 

Как выглядит код:



.box-product2 {
 
    background: #FFFFFF;
    border-left: 1px solid #A87B4F;
    border-right: 0px solid #A87B4F;
    border-bottom: 1px solid #A87B4F;
    width: xx%;
    overflow: auto
}
.box-product2 > div {
    width: 210px;
    display: inline-block;
    vertical-align: middle;  
    border-left: 1px solid #A87B4F;
    border-right: 1px solid #A87B4F;
    border-top: 1px solid #A87B4F;
    margin-right: -1px;
    ;
    margin-bottom: 0px;
    margin-top: 0px;
}
#column-left + #column-right + #content .box-product2 > div {
    width: 279px;
    text-align: center;
}
.box-product2 .image {
    display: block;
    margin-bottom: 5px;
        margin-top: 5px;
    text-align: center;
}
.box-product2 .image img {
    padding: 0px;
    border: 0px solid #E7E7E7;
}
.box-product2 .name a {
    color: #A87B4F;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin-bottom: 9px;
    margin-left: 5px;
    text-align: center;
}
.box-product2 .short{
    font-weight: normal;
    color: #472d16;
    margin-bottom: 10px;
    margin-left: 15px;
    text-align: left;
    }
 
.box-product2 .price {
    font-size: 14px;
    font-weight: bold;
    color: #472d16;
    padding-top: 3px;
    margin-bottom: 5px;
    margin-left: 15px;
 
    text-align: center;
}
.box-product2 .price-old {
    color: #F00;
    text-decoration: line-through;
}
.box-product2 .price-new {
    font-weight: bold;
}
.box-product2 .rating {
    display: block;
    margin-bottom: 4px;
}
.box-product2 .cart {
float: right;
margin-right: 17px;
margin-bottom: 10px;
}


 

Вот как визуально косяк выглядит:

6bea6e2b6fb5f4da5dbec12dfc4cdfb5.png 


Надіслати
Поділитися на інших сайтах


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

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.