Добрый день! Есть магазин на ocstorе (http://storewatch.ru), установлена тема leisure, при переходе в категорию некоторые товары переносятся на следующую строку, образуя пробелы (см картинку). Не знаете ли с чем это связано и как это исправить?
Это связано с тем, что у блока каждого товара указан float:left, а высота блока зависит от контента. Поэтому у вас некоторые блоки "цепляются" за верхние. Надо выровнять все блоки по высоте.
такая же проблема была выровнял размер по самому большому блоку и все норм стало а у тебя так же можно краткое описание убрать из категорий !!!
все верно, из за разного размера описания генерируется разная высота блоков. Как вариант, можно еще задать для LI display:table-cell и убрать float:left - тогда все блоки будут по высоте автоматически одинаковыми. Минус в том, что тогда будет только фиксированное кол-во блоков в строке.
Если контент будет больше, чем значение min-height, то блок все равно вытянется, и другие будут цеплятся за него.
в файле стилей http://storewatch.ru/catalog/view/theme/leisure/css/base.css, в классе .products_grid li изменить ширину, или задать ее правильно, с учетом разрешения и картинок .products_grid li { width: 121px; margin-left: 31px; float: left; padding-bottom: 15px; }
а причем здесь ширина? ширина верно стоит. блоки с флоат идут друг за другом, и если могут, то встают как можно выше, поэтому дело в высоте
У него <ul><li> список, у которых float:left; Было бы места больше, он бы и по 4, и по 5 вмещал - но из-за разной высоты дивов, те, которые перемещаются на строку ниже будут "цеплятся". тут например, 2 блока справа одинаковой высоты, а первый выше - поэтому "цепляется" за первый.
спасибо большое за помощь, сейчас попробую и отпишусь --- Добавлено, 18 апр 2014 --- Я сменил ширину на 121, приведя строку к такому виду: .products_grid li{width:121px; margin-left:31px; float:left; padding-bottom:15px;} и вот что получилось: Вот весь код: Код: /*PRODUCTS List - Grid*/ .products_grid{ margin-bottom:17px; display:inline-block; width:100%;border-bottom:solid 2px #e9e9e9;} .products_grid li{width:121px; margin-left:31px; float:left; padding-bottom:15px;} .products_grid li:first-child{ margin-left:0px;} .search li:nth-child(4n+1) {margin-left:0px;} .products_grid a.product_image{display:block;} .products_grid a.product_image img{ border:solid 2px #fff;} .products_grid li:hover img{-moz-transition:all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out;} .products_grid .product_info{ margin-bottom:10px; padding-bottom:12px; border-bottom:solid 1px;} .products_grid .product_info h3{ font-size:14px; font-weight:normal; padding:12px 0px;} .products_grid .product_info h3 a{color:#000000; text-decoration:none;} .products_grid .product_info small{ color:#a2a2a2; font-size:12px; line-height:16px;} .products_grid .price_info button{ float:right; background:none;border:0px; padding:0px; height:32px; line-height:100%; overflow:hidden; cursor:pointer;} .products_grid .price_info button .pr_price{ background:#544f4b; padding:10px; color:#fff; font-size:14px; font-weight:bold; float:left; clear:both; width:83%; text-transform:uppercase;} .products_grid .price_info button .pr_add{ padding:10px; color:#fff; font-size:11px; font-weight:bold; text-transform:uppercase; float:left; clear:both; width:83%; margin-top:0px;} .products_grid li:hover .pr_add{ margin-top:-32px;-moz-transition:all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out;} .products_grid .price_info a{cursor: pointer; color:#a2a2a2; text-decoration:none; font-size:11px; display:inline-block; padding-top:10px;} #column-left .products_grid .price_info a{display: none;} #column-left .products_grid button {float: left!important;width:200px!important;} Сейчас еще попробую
размер картинок уменьши width:121px я для примера написал и выделил, подразумевая, что тут поменяв можно отстроить
Попробуйте изменить размер изображения товаров, не залазия в код, т.е. Админка-система-настройки-изменить-изображения Меняем *Размер изображения в списке товаров:
Да просто верните все обратно и поставьте .products_grid li {height: ???px; } ??? - любое значение в пикселях
