Добрый день! Подскажите, пожалуйста, как подправить стили модуля «последние», чтобы на странице всегда отображались по 4 товара в ряд вне зависимости от разрешения экрана и браузера! Почему-то на ноуте всё в порядке, а на 2х3 мониторе смотря чем страницу смотришь и какое разрешение, масштаб. Часто по 3 товара в ряд выстраивает, хотя места хватает на четвёртый. Шаблон и модуль стандартные, ocStore-1.5.5.1.2.
Для того чтобы всегда было три, нужно либо установить фиксированную ширину блока с картинкой и фиксированную ширину блока контента, тогда на любом экране будет одинаково. Либо, если ширина блока контента меняется в зависимости от ширины экрана, выставить ширину блока с картинкой в процентах от ширина блока контента.
Спасибо, теорию я понимаю, но как лучше практически и где? Я так понимаю, что у меня ширина задана, а разделение идёт автоматом. Почему тогда оно то на 4, то на 3 делит, если ширина не меняется? Что будет, если ширину добавить? Ведь есть ещё правая и левая колонки... Вот кусок стилей, кажется это нужный: /* box products */ .box-product { width: 100%; overflow: auto; } .box-product > div { width: 168px; display: inline-block; vertical-align: top; margin-right: 20px; margin-bottom: 20px; } --- Добавлено, 29 июн 2014 --- #column-left .box-product > div , #column-right .box-product > div{ width: 155px; margin-right: 0px; } #column-left + #column-right + #content .box-product > div { width: 119px; }
.box-product { width: 100%; overflow: auto; } Это ширина блока контента с товаром (средняя колонка). Вместо 100% напишите нужный Вам размер в пикселях (например 700px; ) .box-product > div { width: 168px; - это ширина блока с товаром, установите значение в пикселях такое, чтоб в строку помещалось нужное количество товаров.
Не очень мне хочется так фиксировать. Что тогда получится? Где-то центральный блок вылезет за рамки, а где-то будет не по всей ширине центра висеть.... Может вместо 168px поставить 25%? Но как тогда поведут себя картинки и текст? Будут масштабироваться или прокрутка пойдёт?
Без разницы будет значение блока с одним товаром в процентах или пикселях, оно всегда будет одинаковым на любом устройстве, если задать фиксированную ширину блоку родителю. Сейчас у Вас .box-product { width: 100%; То есть берётся процент от чего-то и при изменении размера окна, меняется размер блока в котором умещаются товары. Сделайте этот блок фиксированным и он вместе с товарами будет одинаково смотреться на любом устройстве. А ещё лучше зафиксируйте всю область контента.
Я боюсь порушить стили. Кроме вот этой небольшой неприятности - всем доволен. Я имел в виду, что весь родительский блок может вылезти, если его не в процентах, а в пикселях задать. Пока уменьшил margin-right: с 20px; до 7px; и ввёл margin-left: c тем же параметром, чтобы блок в лево не уезжал. Стало лучше, только на IE по 3 штуки в ряд выставляет, хотя места хватает, вроде. За что отвечает width: 168px - я так и не понял. Уменьшал его до 120, но визуально ничего не менялось, так и оставалось по 3 в ряд, а не по 4.
Спасибо, я изменил отступы и теперь в подавляющем большинстве случаев выводится по 4 товара в строке. Не хочу играться с шириной среднего окна, чтобы боковые не нарушить. Можно считать, что вопрос решён. Спасибо Вам за соучастие.
