安排字幕上的圖像

我有這樣的例子：http://jsfiddle.net/WkpL9/
HTML：安排字幕上的圖像

<div class="span2"> 
    <div class="image-container"> 
     <img alt="" src="http://placehold.it/150x120"/> 
     <p>asdadsadasdasdsadasdasdasdasdsadsad</p> 
    </div> 
</div>

CSS：

.image-container { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
} 

.image-container img { 
    max-height: 150px; 
} 

.image-container p { 
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    position: absolute; 
    bottom: 0px; 
}

我想的圖像的標題爲： 1.定位在圖像（在頂層）。 2.垂直放置在圖像的底部。 3.帶省略號。 4.不會離開包裝div。

這可能嗎？

我正在使用twitter bootstrap。

來源

2012-10-23 Naor

我會這樣做的位置：相對;和位置：絕對;，像這樣：文本後…：

.image-container { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
} 

.image-container img { 
    max-height: 150px; 

    position: relative; 

} 

.image-container p { 
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    position: absolute; 
    bottom: 0px; 

    position: absolute; 
    top: 0; 
    left: 0; 

    text-align: center /* Not sure if I misunderstood you with this */ 

} 


.image-container img { 
    margin-top: 15px; 
}

關於省略號，那麼你就可以添加此。那是你的意思嗎？

來源

2012-10-23 20:24:47 Zeth

使用z-index來指定順序，所以你可以放置兩個div彼此重疊，speficy哪一個在頂部或底部。至於定位，您可以使用負值（即top: -50px;）將元素「提升」到目標位置以上。

來源

2012-10-23 20:07:47

1-上.imageContainer p添加的bottom
4-使用word-wrap: break-wordtop:0x;到.imageContainer p instaed。此外，您必須爲px設置height以包含div，並將p元素的寬度設置爲100%。帶有自動換行功能的here's your sample。

來源

2012-10-23 20:14:32 Kamyar

安排字幕上的圖像

回答

相關問題