在圖像頂部有文本div右對齊

Question

我有一個'文本框'根據從數據庫中獲取的句子（字符串）的長度更改大小。

我希望這個文本出現在實際圖像的右下角，但不知何故div比實際圖像更大。

如何確定圖像的底部？

#header-img { 
 
    position : absolute; 
 
    top : 0px; 
 
    left : 0px; 
 
    min-width : 100%; 
 
    min-height : 50%; 
 
    display : inline-block; 
 
} 
 

 
#topimg { 
 
    position : absolute; 
 
    width : 100%; 
 
    top : 0px; 
 
    z-index : -1; 
 
} 
 

 
#textblock{ 
 
    text-align : center; 
 
    width : 46%; 
 
    max-height : 20%; 
 
    position : absolute; 
 
    bottom : 0; 
 
    right : 0; 
 
}

<div id="header-img" class="container-fluid span12"> 
 
    <img id="topimg" src="./img/top_image.jpg" class="center-block img-responsive"> 
 
    <div id="textblock"> 
 
     <span id="rotate">Random Sentences!</span> 
 
    </div> 
 
</div>

Answer 1

使圖像的寬度相同的包裝，#header-img在你的榜樣，然後用包裝來定位文本。

#header-img { 
 
    position : relative; 
 
    min-width : 100%; 
 
    min-height : 50%; 
 
} 
 

 
#topimg { 
 
    display: block; 
 
    width : 100%; 
 
} 
 

 
#textblock{ 
 
    text-align : center; 
 
    width : 46%; 
 
    position : absolute; 
 
    bottom : 0; 
 
    right : 0; 
 
    color: #FFF; 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
}

<div id="header-img" class="container-fluid span12"> 
 
    <img id="topimg" src="http://lorempixel.com/400/400" class="center-block img-responsive"> 
 
    <div id="textblock"> 
 
     <span id="rotate">Random Sentences!</span> 
 
    </div> 
 
</div>

Answer 2

也許包裹圖片和文字在一起嗎？

figure { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    display: block; 
 
    /* or vertical-align:top; */ 
 
} 
 

 
figcaption { 
 
    position: absolute; 
 
    background: red; 
 
    color: yellow; 
 
    font-weight: bold; 
 
    text-align:center; 
 
    padding: 0.25em 2.5em; 
 
    bottom: 0; 
 
    max-width: (100% + 2em); 
 
    right: -1em; 
 
    transform: rotate(-25deg); 
 
    transform-origin: 4.5em -2.5em; 
 
    box-shadow: 0 0 5px black; 
 
}

<figure> 
 
    <img src="http://lorempixel.com/300/180/" /> 
 
    <figcaption> 
 
    rotate me ? 
 
    </figcaption> 
 
</figure> 
 
<figure> 
 
    <img src="http://lorempixel.com/300/180/" /> 
 
    <figcaption> 
 
    or rotate me not ? 
 
    </figcaption> 
 
</figure> 
 
<figure> 
 
    <img src="http://lorempixel.com/300/180/" /> 
 
    <figcaption> 
 
    longer text ? 
 
    or rotate me not ? 
 
    </figcaption> 
 
</figure>