2

Здравствуйте

Вот кусок кода, который отвечает за вывод карточек товара на странице категории:

<div class="items fix">
    <!-- BEGIN product -->
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="col-xs-12" style="box-shadow: 0 0 5px rgba(0,0,0,0.3); display: table-cell; margin-bottom: 20px;">
            <div class="col-sm-12">
                <!-- BEGIN product.picture --><div class="img {product.LABEL}"><a href="item/{product.KEY}"><img src="images/product/s/{product.picture.SRC}" style="width:100%; height: auto;" alt="{product.NAME}"/></a></div><!-- END product.picture -->
            </div>
            <div class="text-center col-xs-12">
                <h4><a href="item/{product.KEY}">{product.NAME}</a></h4>
                <div class="brief text"><p>{product.BRIEF}</p></div>
                <!-- BEGIN product.param -->
                <div class="param text-center">
                    <select class="form-control">
                        <option>Выберите {product.param.NAME}</option>
                        <!-- BEGIN product.param.val --><option value="{product.ID}:{product.param.val.NUM}" rel="{product.param.val.PRICE}" rel2="{product.param.val.PRICE_OLD}">{product.param.val.NAME}</option><!-- END product.param.val -->
                    </select>
                </div>
                <!-- END product.param -->
                <!-- BEGIN product.price_old --><div class="oldprice" style="margin-top: 10px; font-size: 18px; color: #E91E63">Старая цена: <span style="text-decoration: line-through;">{product.PRICE_OLD}</span> &#8381;</div><!-- END product.price_old -->
                <!-- BEGIN product.price --><div class="price" style="font-size: 24px; color: #00695C !important;">Цена: <span>{product.PRICE}</span> &#8381;</div><!-- END product.price -->
                <div class="actions">
                    <a href="item/{product.KEY}" class="button gray view">Подробнее</a>
                    <div class="button red {BUTTON_ORDER_CLASS}" id="{product.ID}<!-- BEGIN product.param -->:0<!-- END product.param -->">{BUTTON_ORDER_TEXT}</div>
                </div>
            </div>
        </div>
    </div>

При выводе получается такая история - http://prntscr.com/ckxfi4 Насколько я понимаю виной тому - разные высоты изображений, которые делают блоки разными по высоте.

Решение, которое пробовал - фиксировал высоту блока (например, 500px). Но в этом случае на xs контент не умещается в высоту и еще ряд подобных проблем.

Так как же сверстать вывод карточек товаров в красивую сетку?

1
  • Кусок кода, остается только догадываться, что не получается.
    – SVE
    22 сен 2016 в 7:49

1 ответ 1

2

У вас два варианта:

1. Фиксировать высоту контента в карточках

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

Изображение можно ограничить по высоте вот так:

.items img {
  height: 100px;
  width: auto;
}

А под название выделите 2 строки по высоте, явно через height:

.items h4 {
  height: 48px;
}

2. Использовать pinterest-like сетку

Подключите masonry, эта библиотека строит pinterest-like сетку из блоков произвольной высоты.

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.