Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

post-23316-0-36690000-1370626696_thumb.png

Link to post
Share on other sites

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

 

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

 

 

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

Link to post
Share on other sites

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

 

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

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

 

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

Link to post
Share on other sites

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

 

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

 

 

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

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

Link to post
Share on other sites

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

 


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

 

  • +1 1
Link to post
Share on other sites

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

 


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

Link to post
Share on other sites

  • 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

Link to post
Share on other sites

Найдено!

 

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

 

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

Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.