alinhamento de div
Eae galera, blz? Estou com um problema aqui de css que nao consigo resolver.
Eu tenho um código php que vai fazer uma consulta no banco de dados para álbuns de um determinado artista. Eu gostaria que quando retornasse, fosse exibido assim
Mas, quando alguma div tem mais de duas faixas, neste caso a primeira, acontece que a ultima faixa da outra div fica "grudada" com a ultima faixa da primeira.
assim:
Alguem saberia me informar o que esta acontecendo e como posso resolver isso?
Códigos:
https://jsfiddle.net/natant1/94wh5d6u/
<div id="conteudoAlbum">
<img src="https://upload.wikimedia.org/wikipedia/en/8/89/In_the_Zone.png" />
<span id="TituloAlbum">In The Zone</span>
<a id="faixa" href="#">
<span id="numeroFaixa">1</span>
<div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div>
<span id="nomeFaixa">Toxic</span>
</a>
<a id="faixa" href="#">
<span id="numeroFaixa">1</span>
<div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div>
<span id="nomeFaixa">Toxic</span>
</a>
</div>
<div id="conteudoAlbum">
<img src="https://upload.wikimedia.org/wikipedia/pt/9/92/Britney_Circus_Album.png" />
<span id="TituloAlbum">Circus</span>
<a id="faixa" href="#">
<span id="numeroFaixa">1</span>
<div id="iconnum"><img src="https://i.ytimg.com/vi/lVhJ_A8XUgc/maxresdefault.jpg" height="85px" /></div>
<span id="nomeFaixa">Circus</span>
</a>
</div>
#conteudoAlbum{
position: relative;
background: white;
width: 300px;
height: auto;
margin-top: 30px;
margin-right: 40px;
display: inline-block;
-webkit-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
-moz-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
}
#TituloAlbum{
position: relative;
font-family: Arial;
font-size: 1.4em;
color: black;
display: block;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 15px;
}
#faixa{
position: relative;
display: block;
height: 85px;
width: 100%;
line-height: 85px;
background-color: rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
#faixa:hover{
background-color: rgba(0, 0, 0, 0.1);
}
#numeroFaixa{
position: absolute;
display: block;
padding-left: 10px;
padding-right: 10px;
font-family: Arial;
font-size: 1.4em;
color: #45C0CF;
display: inline-block;
}
#iconnum{
position: relative;
left: 33px;
display: inline-block;
max-height: 85px;
}
#iconnum img{
display: inline-block;
max-height: 85px;
}
#nomeFaixa{
position: absolute;
display: block;
left: 200px;
font-family: Arial;
font-size: 1.4em;
color: black;
display: inline-block;
}Discussão (2)
Carregando comentários...