2016-11-04 117 views
-1

代碼:http://cssdeck.com/labs/aqhndehk垂直不對齊的CSS列

我正在創建一個顯示相冊信息的頁面。我想要做的是使用CSS列中的有序列表列出所有歌曲,但是當我這樣做時,第一列幾乎比第二列低一個項目。我已經嘗試在this線程中修復無效。有沒有辦法我可以解決這個使用CSS/HTML?

+0

可以請你加你的輸出應該如何 – Geeky

+0

我理想的結果將是有名單項目1與列表項目10對齊。如果您查看代碼中的輸出,您很快會注意到1低於10,並且在當前狀態下看起來非常糟糕。 – UberPilot

+0

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

回答

0

出欄,指望在醇不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>