將一個標題屬性放在圖片庫

-1

我需要創建一個圖片庫，如下所示。它工作正常，但我需要在圖像下方放置一個標題（每個圖像都有一個標題）。當我像下面一樣嘗試時 - 那個標題顯示不正確。你能告訴我該怎麼做嗎？將一個標題屬性放在圖片庫

的Html

<ul id="thumbnailsList"> 
    <li *ngFor="let image of datasource"> 

     <img src="{{image.url}}" class="tn" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image)> 
     <div class="myClass"><strong>{{image.title}}</strong></div> 


    </li> 
</ul>

CSS

.myClass { 
    position: absolute; 
}

結果：

更新：

當我刪除了.myClass它顯示像below.But我需要水平顯示影像和圖像的文本底部。

來源

2017-01-22 Sampath

你想讓它看起來像左邊的圖像？ T1？ –

我需要把標題下方的每一個圖像@MichaelCoker – Sampath

那麼爲什麼不直接使用你有HTML，並移除'的位置是：絕對的;''從.myClass'？默認情況下，div將顯示在圖像下方，無需額外的CSS。 –

我一直在使用引導響應式設計做到了。

HTML

<div class="row"> 
    <div *ngFor="let image of dataCollection" class="col-md-3 col-sm-4 col-xs-6"> 
     <img class="img-responsive tn" src="{{image.blobFileUrl}}" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image) /> 
     <div class="desc">{{image.name}}</div> 
    </div> 
</div>

CSS

div.desc { 
    padding: 15px; 
    text-align: center; 
} 

.tn { 
    margin: 2px 0px; 
    box-shadow: #999 1px 1px 3px 1px; 
    cursor: pointer; 
    width: 100% !important; 
    height: 200px !important; 
}

來源

2017-01-22 14:20:45 Sampath

要使其工作使用的位置是：絕對的，你需要給父容器的位置屬性做：

#thumbnailsList li 
    position: relative

來源

2017-01-22 02:39:03

不working.it仍然顯示爲像我的第一image.no區別。 – Sampath

將一個標題屬性放在圖片庫

回答

相關問題