Как исправить косяк вёрстки?

Question

[alex1nd]

reklamavrostov.ru/category/portfolio

Здравствуйте, выводится по 32 ячейки на каждой странице портфолио

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

Answer 1

[Евгений Саймон]

Сделай каждой ячейке отступ снизу 0px и дополнительно добавь высоту в 229px, чтоб все лежало ровно

Comments

[alex1nd]

высоты нехватало да

Answer 2

[Виктор Таран]

Даже не буду смотреть в код чтоб решить вашу проблему, она настолько избита что уже не смешно.
1. У вас разные размеры картинок, в следствие чего вы видите сее непристойство.
Если вы будите использовать это решение исключительно для галереи, то просто подровняйте картинки.
Если в них подразумевается динамический контент и тем более это текст и картинка, то есть множество решений, но этого не было в задаче.

Comments

[alex1nd]

дизайнер делает одинаковые размеры всегда---

[Виктор Таран]

alex1nd, Дизайнеры НИКОГДА не делают одинаковых размеров, уж поверьте мне.
И причина этму, нормальная сетка в фотошопе появилась только в последних редакциях и их никто никогда не использует.
Дизайнеры все тыкают на глаз, а для таких финтов хватает и 1 пиксела.
А вы для начала поставьте картинки 1:1
В данном же макете картинки вообще все разные.
Если у вас есть пример КАЧЕСТВЕННО сделаного макета дизайрером, ооооочень бы хотелось на него взглянуть, я его в рамочку поставлю.

[alex1nd]

Виктор Таран, я заранее уже попросил дизайнера чтобы сделал----у вас слишком много буков--и мало ефекта---проблема уже решена---вы спорите хоть бы скачали сравнили картинки

[Виктор Таран]

alex1nd, Ой и правда, видимо я в шар долблюсь.
И не видил с вас ссылку на качественный макет.

[alex1nd]

reklamavrostov.ru/wp-content/uploads/2018/01/%D0%B...
reklamavrostov.ru/wp-content/uploads/2018/01/%D0%B...

[alex1nd]

reklamavrostov.ru/wp-content/uploads/2018/01/%D0%9...

да там новые картинки почему то больше пошли---вы правы---о первые штук 100 что загружались были в одном и том же размере

[Виктор Таран]

alex1nd,
Ну кэп

[Виктор Таран]

http://reklamavrostov.ru/wp-content/uploads/2018/0...
http://reklamavrostov.ru/wp-content/uploads/2018/0...
ДА еще и русскими буквами, это ваще провал.
Используй в анонсовых картинках исключительн 1:1 размер, и следи чтоб програмеры это потом не поменяли.
ЭТо полезно и для верстки, ид для оптимизации размера страницы.
Не требуй от "налету" алгоритма сжатия каких-то высот, требуй их от себя.
Мало того ты еще не сталкивался с версткой карточки товара в списке, там ведь еще и динамические размеры 3 блоков в диве плюс такая же ситуация с картинками. Вот там все намного интересней.

Answer 3

[I'm Yoda]

после каждого ряда добавьте <div class="clearfix"></div>

Comments

[alex1nd]

если я так делаю то они в 1 ряд все становятся

[I'm Yoda]

alex1nd, эти классы "col-md-3 col-sm-6 col-xs-12 no-pad" сделайте для ссылок, а после каждого ряда добавьте то, что написано выше.

[Виктор Таран]

alex1nd, clearfix не поможет, посколкьу это бутстрап а тут еще вроде как адаптив предвидится.
а следватлеьно нужно еще учитывать разрешение и количество элементов, вот реально проще нормально сделать.
Хотя часто бывает что это сделать невозможно ( не в этом случае)
Тут уже есть много вариантов.
Я использую самый простой без единой строчки кода js css
НО пару строк на php, который динамически подставляет каждый 3 и 2 див кол12 с visible-текущее
в таком случае клеарфикс будет появлятья там где нужно и без использования js,
ну а 1 ифка на php смотрится очень просто. mydefile.ru/catalog

<?php
                if (($key+1)%3 == 0){echo('<div class="col-lg-12 visible-lg"></div>');}
                if (($key+1)%2 == 0){echo('<div class="col-xs-12 hidden-lg"></div>');}
            } elseif ($_SESSION['yum_last_state']['viewmode']=='list') {?>