카탈로그의 부동 요소가 원하는대로 나타나지 않습니다.

Question

제품 카탈로그가 있습니다. 모든 요소는 왼쪽으로 떠있었습니다. 그러나 내부의 그림이 다른 크기 일 수 있기 때문에 다른 요소가 다른 높이가 될 수 있습니다. 중간 요소가 동일한 행의 다른 요소보다 길면 두 번째 선 요소가 그 요소에 달라 붙습니다.

Fiddle

HTML :

<div class="frame"> 
    <div class="element"> 
     <div></div> 
    </div> 
    <div class="element"> 
     <div class="img"></div> 
    </div> 
    <div class="element"> 
     <div></div> 
    </div> 
    <div class="element"> 
     <div></div> 
    </div> 
    <div class="element"> 
     <div></div> 
    </div> 
</div> 

CSS :

여기

.element{ 
    float: left; 
    border: 1px solid black; 
    margin: 0px 0px 10px 10px; 
    min-height: 110px; 
    min-width: 70px; 
    box-sizing: border-box; 
} 
.frame{ 
    width: 240px; 
    overflow: hidden; 
    border: 1px solid black; 
    padding: 10px 10px 0px 0px; 
} 
.img{ 
    height: 130px 
} 

당신은 내가 무슨 말을하고 어떤 단지 모델을 볼 수는 실제 코드 아니지만, 문제를 나타냅니다. 동일한 행 요소의 높이를 조정할 수있는 방법이 있습니까? 높이가 행의 가장 긴 요소를 조정합니다.

Answer 1

레이아웃의 마지막 요소에 속성 지우기를 적용 했습니까? 그것은

Answer 2

flexbox이 필요하다고 생각합니다.

내 페이지 here을 확인하고 그림 타일 배치 방법을 확인하십시오.

Answer 3

이 혼자 CSS와 수 없습니다 ... mendatory, 당신은이 문제를 해결하기 위해 자바 스크립트가 필요합니다. 벽돌은이 문제를 해결합니다 : http://masonry.desandro.com.

이미지를 표시하려면 CollagePlus을 살펴볼 수도 있습니다.