Авто высота сетки

Question

У меня есть сетка продукта в моем интернет-магазине (http://shop.rukahore.sk/). Каждый продукт div равен 222px x 222px, но я хочу, чтобы он имел автоматическую высоту.

Я пробовал что-то вроде этого - http://patterntap.com/code/stacking-columns-layout-masonry, , но мне пришлось добавить минимальную высоту, и это выглядело не очень хорошо, потому что некоторые из изображений были меньше или больше, и обертывание div было по-прежнему 222px, что я не хочу произойти из-за эффекта наведения и т. д.

Может кто-нибудь дать совет относительно этого?

Answer 1

Ну, используя дисплей, показанный на этой странице, вы должны использовать плагин

<!-- Requires Masonry | visit http://masonry.desandro.com/ to download --> 

Если вы не хотите, чтобы добавить больше плагинов ... Ну, что делает вас потерять высота равна float css. Вы должны использовать другую вещь для создания сетки, например, как они это делают на www.camarasdecolores.com.

Чтобы добавить плагин масонства:

Добавить идентификатор в контейнере:

<div id="masonryContainer" class="hp-products allposts" style="position: relative; height: 2008px;"> 

Добавьте код инициализации JS в сценарии

$(window).load(function(){ 
    $('#masonryContainer').masonry({ 
    itemSelector: '.hp-product', 
    columnWidth: 60 
    }); 
}); 

изменить некоторые CSS:

#masonryContainer { width: 0 auto; } 

.hp-product { 
    width: 180px; float: left; 
} 
.hp-product-img { 

} 
.hp-product-img img { 
    max-width: 100%; 
    height: auto; 
    } 
//Void the following ones 
    .hp-products { 
    } 
    .allposts { 
    } 
    .allposts .hp-product { 
    }