垂直不对齐的CSS列

-1

代码：http://cssdeck.com/labs/aqhndehk 垂直不对齐的CSS列

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

来源

2016-11-04 UberPilot

可以请你加你的输出应该如何 – Geeky

我理想的结果将是有名单项目1与列表项目10对齐。如果您查看代码中的输出，您很快会注意到1低于10，并且在当前状态下看起来非常糟糕。 – UberPilot

这是你在看什么http://codepen.io/sahithiK/pen/eBYWNB – Geeky

出栏，指望在醇不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>

来源

2016-11-04 06:18:40 Geeky

垂直不对齐的CSS列

回答

相关问题