div의 높이가 같을 때 CSS 열이 작동하지 않습니다.

Question

다른 JS 플러그인을로드하지 않고도 비슷한 방식으로 기둥을 만들려고합니다.

.masonry { 
    -moz-column-count:3; 
    -webkit-column-count:3; 
    column-count: 3; 
} 
.item { 
    width: 273px; 
    border:1px solid black; 
    background: lightgray; 
    display:inline-block; 
    vertical-align:top; 
    margin-right:50px; 
    margin-bottom:50px; 
} 

는 이유를 몰라,하지만 것으로 보인다 열 카운트가 작동하지 않습니다 :

내 HTML은이

<div class="masonry"> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
     <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
     <div class="item"> 
     <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a> 

     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
     <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
</div> 

CSS 것 같습니다. 두 번째 줄의 마지막 요소가 두 번째 줄의 오른쪽으로 떠 다니는 대신 아래로 당겨집니다.

업데이트 : 블록 높이가 같을 때 발생합니다. 나는 내용을 변경하는 경우, 열은 작동 수평

더 명확하게하기 위해 바이올린을 참조하십시오 및 this.Thanks

http://jsfiddle.net/frontDev111/7Lcrt8kq/

Answer 1

그 열이 수평이 아닌 수직 스태킹에 대한 경험을 공유하기 시작합니다. 그래서 간다 : 당신은 단순히 열 카운트 속성을 제거하여 원하는 동작을 달성 할 수

item1 item4 item7 

item2 item5 

item3 item6 

: http://jsfiddle.net/zephod/n42sqd4v/1/

편집 : 당신이 전체 벽돌 동작을 원하는 경우, 내 충고는 jQuery를 벽돌 플러그인을 사용하는 것입니다. 여러분이 놓칠 수있는 많은 경우를 다루었을뿐만 아니라 광범위한 웹 브라우저에서 철저히 테스트되었으므로 그 바퀴를 재발견 할 강력한 이유가 필요합니다.

Answer 2

아니요, 코드가 작동 중입니다. 그것은 응답하지 않습니다. jsfidle 브라우저 창을 크게 만들면 3 개의 열이 분명하게 표시됩니다.