자동 높이 그리드

Question

내 전자 상점 (http://shop.rukahore.sk/)에 제품 격자가 있습니다. 모든 제품 div는 222px x 222px이지만 자동 높이를 원합니다.

나는이 같은 시도 - http://patterntap.com/code/stacking-columns-layout-masonry, 을하지만 난 분 높이를 추가했다 및 이미지의 일부가 작거나 큰했다 및 포장 사업부 내가 원하지 않는, 여전히 222px 때문에 그것은 좋은 보이지 않았다 호버 (hover) 효과 등으로 인해 발생할 수 있습니다.

다른 사람이 조언을 제공 할 수 있습니까?

Answer 1

음, 해당 페이지에 표시된 디스플레이를 사용하여 당신은 당신이 더 많은 플러그인을 ... 추가하지 않으려면

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

글쎄, 무엇을 만드는 것은 당신이 잃을 높이가있는 플러그인을 사용할 필요가 float css 속성. 그리드를 만들기 위해 다른 것을 사용해야합니다 (예 : www.camarasdecolores.com에서 어떻게하는지보십시오).

이 컨테이너에 ID를 추가합니다 :

:

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

스크립트

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

변화에 일부 CSS를 초기화 JS 코드를 추가

석공 술 플러그인을 추가하려면

#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 { 
    }