垂直未对齐的CSS列

Question

代码：http://cssdeck.com/labs/aqhndehk

我正在创建一个显示相册信息的页面。我想要做的是使用CSS列中的有序列表列出所有歌曲，但是当我这样做时，第一列几乎比第二列低一个项目。我已经在this线程中看到修复无效。有没有办法可以使用CSS / HTML解决这个问题？

Answer 1

在ol而不是div

上给列数

检查此代码段

.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>