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

[igorfelix 19]

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

[Tom 3,745]

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

 

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

 

 

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

[Pascha 67]

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

 

.product-info .image-additional {
width: 260px;<------- ТУТ МЕНЯТЬ
.....
}
 

но не переусердствуйте (может появиться скролл), тогда играйтесь еще размерами изображений доп. картинок через админку, либо слегка подправить верстку. (этот блок находится в диве с классом left и что бы разместить много картинок нужно их вынести за пределы этого дива, так как именно он ограничит скроллом ширину блока картинок

[igorfelix 19]

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

 

.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 , друг на друга залазиют. = (

[igorfelix 19]

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

 

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

 

 

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

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

[Pascha 67]

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

 

.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;
}
 

 

[igorfelix 19]

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

 

.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 картинки в одну строчку . Держите плюсик )

[faunaSwan 0]

 

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

.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

[faunaSwan 0]

Найдено!

 

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

 

}
.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;

[faunaSwan 0]

А вообще в ПРОДУКТЕ я все дополнительные картинки вывел за ПОДЕЛИТЬСЯ - теперь Умещается 5 шт. размером 150х120 пикс