CSS 스타일의 열은 하위 요소의 수에 따라 수직 위치로 이동합니다.

Question

새 응용 프로그램의 경우 세로로 스크롤되고 jquery-ui를 사용하여 드롭 대상 인 열 (행 모양 3 스타일)을 만들고 싶습니다.

나는 이것들을 스타일링하려는 나의 시도에서 상당히 성공적이지만, 나는 그 안에 놓이는 물방울 수에 따라 위 또는 아래로 모든 컬럼이 위 아래로 이동한다.

<div class="pipeline"> 
    <div class="panel panel-default panel-fase"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Fase 1</h3> 
     </div> 
     <div class="panel-body fase-deals"> 
      <div class="deal"> 
       <h4 class="deal-title">My Deal #1</h4> 
      </div> 
      <div class="deal"> 
       <h4 class="deal-title">My Deal #2</h4> 
      </div> 
      <div class="deal"> 
       <h4 class="deal-title">My Deal #3</h4> 
      </div> 
      <div class="deal"> 
       <h4 class="deal-title">My Deal #4</h4> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default panel-fase"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Fase 2</h3> 
     </div> 
     <div class="panel-body fase-deals"> 
     </div> 
    </div> 
    ... 

스타일링이 CSS의 작품을 사용하여, 나는 컬럼의 수를 추가하고 가로로 스크롤 할 수 있습니다 다음과 같이

내 페이지의 일반적인 구조입니다. 그러나 각 열 (내 코드의 부트 스트랩 패널)은 항목 수 (내 코드의 div.deal)에 따라 세로 위치를가집니다. 그래서 끌어서 놓기를 사용하여 항목을 추가 할 때 열이 위로 이동하고 항목을 제거하면 내 열이 아래쪽으로 이동합니다. https://jsfiddle.net/31qxxs6r/

Answer 1

이처럼 카드에 vertical-align: top 추가 :

.panel-fase { 
    display: inline-block; 
    width: 400px; 
    vertical-align: top; 
} 

거기 가고

나는 내 문제를 보여줍니다이 jsfiddle 내 소스를 가지고! 내 의견을 알려주십시오. 감사!

체크 fiddle