Grille de hauteur automatique

Question

J'ai une grille de produits sur mon e-shop (http://shop.rukahore.sk/). Chaque produit div est 222px x 222px, mais je veux qu'il ait la hauteur automatique. Je ai essayé quelque chose comme ça - http://patterntap.com/code/stacking-columns-layout-masonry, mais je devais ajouter min-hauteur et il ne semblait pas bon parce que certaines des images étaient plus petites ou plus grandes et enveloppant div était encore 222px, ce que je ne veux pas se produire en raison de l'effet de survol, etc.

Quelqu'un peut-il donner des conseils à ce sujet?

Answer 1

Eh bien, pour utiliser l'écran indiqué dans cette page, vous devez utiliser le plugin

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

Si vous ne voulez pas ajouter d'autres plugins ... Eh bien, ce qui vous fait perdre la hauteur est la float css propriété. Vous devriez utiliser autre chose pour faire la grille, voir par exemple comment ils le font dans www.camarasdecolores.com.

Pour ajouter le plugin Maçonnerie:

Ajouter un identifiant à votre conteneur:

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

Ajoutez le code js init dans un script

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

changement du code 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 { 
    }