-1
代碼:http://cssdeck.com/labs/aqhndehk垂直不對齊的CSS列
我正在創建一個顯示相冊信息的頁面。我想要做的是使用CSS列中的有序列表列出所有歌曲,但是當我這樣做時,第一列幾乎比第二列低一個項目。我已經嘗試在this線程中修復無效。有沒有辦法我可以解決這個使用CSS/HTML?
代碼:http://cssdeck.com/labs/aqhndehk垂直不對齊的CSS列
我正在創建一個顯示相冊信息的頁面。我想要做的是使用CSS列中的有序列表列出所有歌曲,但是當我這樣做時,第一列幾乎比第二列低一個項目。我已經嘗試在this線程中修復無效。有沒有辦法我可以解決這個使用CSS/HTML?
出欄,指望在醇不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>
可以請你加你的輸出應該如何 – Geeky
我理想的結果將是有名單項目1與列表項目10對齊。如果您查看代碼中的輸出,您很快會注意到1低於10,並且在當前狀態下看起來非常糟糕。 – UberPilot
這是你在看什麼http://codepen.io/sahithiK/pen/eBYWNB – Geeky