將text-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

也許將圖像和文本包裝在一起？

 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> 

Answer 2

使圖像與包裝器的寬度相同，在示例中為#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>