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

Выровнять дополнительные изображения товара в одну строку


igorfelix

Recommended Posts

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

 

https://opencartforum.com/topic/11477-karusel-dopolnitelnykh-fotografii/

 

 

https://opencartforum.com/topic/19527-prokrutka-dop-izobrazhenii-na-stranitce-tovara-how-to/

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

стиль для этого блока: 

 

.product-info .image-additional {
width: 260px;<------- ТУТ МЕНЯТЬ
.....
}
 
но не переусердствуйте (может появиться скролл), тогда играйтесь еще размерами изображений доп. картинок через админку, либо слегка подправить верстку. (этот блок находится в диве с классом left и что бы разместить много картинок нужно их вынести за пределы этого дива, так как именно он ограничит скроллом ширину блока картинок

 

там блок

.product-info .image-additional a {

    float: left;

    display: block;

    margin-left: 10px;

    margin-bottom: 10px;

  

добавил width: 260px; , попробовал разные значения, все равно столбиком . если делать 10px , друг на друга залазиют. = (

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


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

 

https://opencartforum.com/topic/11477-karusel-dopolnitelnykh-fotografii/

 

 

https://opencartforum.com/topic/19527-prokrutka-dop-izobrazhenii-na-stranitce-tovara-how-to/

спасибо, смотрел тему.. так и хотелось сделать это без модуля прокрутки,

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


Скопировано полностью с дефолта

 


.product-info .image-additional {
width: 260px; <---- ВОТ ЭТОТ ПАРАМЕТР И МЕНЯТЬ!!!!!!!
margin-left: (минус*)10px;
clear: both;
overflow: hidden;
}
.product-info .image-additional img {
border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
float: left;
display: block;
margin-left: 10px;
margin-bottom: 10px;
}
 

 

Спасибо ) помогло ) ставим вместо 260 , 360px и 4 картинки в одну строчку . Держите плюсик )

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


  • 11 months later...

 

Скопировано полностью с дефолта


.product-info .image-additional {
width: 260px; <---- ВОТ ЭТОТ ПАРАМЕТР И МЕНЯТЬ!!!!!!!
margin-left: (минус*)10px;
clear: both;
overflow: hidden;
}
.product-info .image-additional img {
border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
float: left;
display: block;
margin-left: 10px;
margin-bottom: 10px;
}
 

 

 

А у меня с изменением значения ничего не происходит((((

 

HELP

post-683394-0-55320900-1401070165_thumb.jpg

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


Найдено!

 

В стилях мешалась разметка - Её тоже надо править:

 

}
.product-info > .left + .right {
    margin-left: 550px; :-) <-------------------------------------------Тут с какого места начинается краткое описание товара (Должно быть не меньше параметра, который меняем=смотри ниже=)
}
.product-info .image {
    border: 1px solid #E7E7E7;
    float: left;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
}
.product-info .image-additional {
    width: 550px; :wink: <-------------------------------Тут прописываем ширину для расположения баннеров
    ;
    clear: both;
    overflow: hidden;

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


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

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

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

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

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

Вхід

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

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

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