HTML + CSS圖片上有多種風格，線條的文字

在我最後一個問題中，我問我怎麼才能將圖片添加到圖片的灰色區域，有些人建議使用<span>，我結束了所有的文字（因爲它是一個跨度，內聯）在一條線上（左圖），儘管它被設置爲display:block。我怎麼能把它分解成單獨的行，如右圖所示？和它有意義使用h4/h5的樣式或我應該使用不同的div或東西？HTML + CSS圖片上有多種風格，線條的文字

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

    }

來源

2014-06-23 GytisK

差不多就只有殺了你的整個'.rightCol1一個span'規則。 – j08691

但後來：http://imgur.com/mgYOhoQ我怎樣才能垂直對齊的圖片頂部？ – GytisK

刪除h5元素上的邊距。這就是推動它。 – j08691

這是因爲你的span沒有線的高度，所以每個上線就會出來ontop的對方。我建議您從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; 
}

來源

2014-06-23 15:54:00 Andy

哈哈，認真嗎？我發誓我將它移除了4次，測試的東西，似乎沒有做任何事情。在我看到您的帖子後，再次將其刪除，然後在圖片上完美顯示。謝謝。_。 – GytisK

@GytisK沒問題，有時候只需要第二雙眼睛 – Andy

HTML + CSS圖片上有多種風格，線條的文字

回答

相關問題