HTML+CSS 多种样式，图片上的行文字

Question

在我的最后一个问题中，我问我如何将文本添加到图片的灰色区域，一些人建议使用 <span> , 我最终将所有文本(因为它毕竟是一个跨度，内联)在一行中彼此重叠(左图)，即使它被设置为 display:block .我怎样才能把它分成单独的行，如右图所示？将 h4/h5 用于样式是否有意义，或者我应该使用不同的 div 或其他东西？

HTML:

<div class="rightCol1"> 

    <a href="#"><img src="pic1.png"><span><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas <br> sarpalius ir lukas  šukutis</h5></span></a> 

    <a href="#"><img src="pic2.png"><span><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visą klubo <br> istoriją </h5></span></a>

</div>

CSS:

.rightCol1{
        float:right;
        margin-right:150px;
        margin-top:10px;

    }   

    .rightCol1 a {
        background:green;
        display: block;
        position:relative;
        height:200px;
        width:100px;
        margin-bottom: 160px
    }

    .rightCol1 a span {

        line-height:0px;
        display:block;
        margin-left:15px;
        width:234px;
        height:70px;
        position:absolute;
        bottom:-80;
        left:0;
        z-index:1;

    }

    h4{ 
        padding:0;
        margin:0;
        font-style:;
        color:#e6540c;
        font-weight:bold;
        font-size:14;
    }

    h5{
        padding:0;
        text-transform:uppercase;
        color:rgb(193,193,193);

    }

Answer 1

这是因为你的 span 没有行高，所以每一行都会出现在彼此之上。我建议从您的 span CSS 中删除 line-height:

.rightCol1 a span {
    display:block;
    margin-left:15px;
    width:234px;
    height:70px;
    position:absolute;
    bottom:-80px;
    left:0;
    z-index:1;
}