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;
}