세로로 정렬되지 않은 CSS 열

Question

코드 : http://cssdeck.com/labs/aqhndehk

앨범 정보를 표시하는 페이지를 만들고 있습니다. 내가하고 싶은 일은 CSS 열에 정렬 된 목록을 사용하여 모든 노래를 나열하는 것입니다.하지만 이렇게하면 첫 번째 열은 두 번째 열보다 거의 하나 적은 항목입니다. 나는 this 스레드에서 아무런 효력을 발휘하지 못했습니다. CSS/HTML을 사용하여이 문제를 해결할 수있는 방법이 있습니까?

Answer 1

가지 적어 열 포함되지

확인을

.album_container 
 
{ 
 
    background: rgba(0,0,0, 0.75); 
 
    position: relative; 
 
    top:0; 
 
    padding-bottom: 250px; 
 
    margin:0; 
 
    margin-bottom: 100px; 
 
    margin-right: 30px; 
 
    left:18px; 
 
} 
 

 
.album_image 
 
{ 
 
    opacity: 1.0; 
 
    position: absolute; 
 
    left: 5px; 
 
    color: #ddd; 
 
    background: rgba(0,0,0, 0.85); 
 
    line-height: 0; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    border-radius: 10px; 
 
} 
 

 
.album_image img{ 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
} 
 

 
.album_image h4 
 
{ 
 
    line-height: 0; 
 
    margin-left: 5px; 
 
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; 
 
    font-size: 12pt; 
 
} 
 

 

 
.album_image h5 
 
{ 
 
    line-height: 0; 
 
    font-style: italic; 
 
    margin-left: 5px; 
 
    font-size: 12pt; 
 
} 
 

 
/*.album_songs 
 
{ 
 
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; 
 
    margin:0; 
 
    position: absolute; 
 
    padding-top: 0px; 
 
    left: 270px; 
 
    padding-right: 600px; 
 
    line-height: 0; 
 
    color: #ddd; 
 
    font-size: 12pt; 
 
    top: 0; 
 
    padding-bottom: 210px; 
 
    column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-width: auto; 
 
    column-fill: auto; 
 
    height: 210px; 
 
}*/ 
 

 
.album_songs{ 
 
    position: absolute; 
 
    padding-top: 0px; 
 
    margin:0; 
 
    position: absolute; 
 
    padding-top: 0px; 
 
    left: 270px; 
 
    
 
} 
 
.album_songs ol{ 
 
column-count: 2; 
 
    column-gap:50px; 
 
}

 <div class="album_container"> 
 
      <div class="album_image"> 
 
      <img src="http://got-djent.com/sites/default/files/imagefield_default_images/placeholder_0.png" height="250" width="250"> 
 
      <h4>Unknown Album</h4> 
 
      <h5>Unknown Artist</h5> 
 
      </div> 
 
     <div class="album_songs"> 
 
     <ol> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li>  <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     <li>a</li> 
 
     
 
     <li>a</li> 
 
     
 
     <li>a</li> 
 
     
 
     <li>a</li> 
 
     
 
     <li>a</li> 
 
     </ol> 
 
     </div> 
 
    </div>