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 that you have read and understand our privacy policy and code of conduct.

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