Вертикально выровнены 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>