我有一个“文本框”,它根据从数据库中获取的句子(字符串)的长度改变大小。
我希望此文本显示在实际图像的右下角,但不知何故 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>
最佳答案
也许将图像和文本包装在一起?
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>
关于html - 让 text-div 在图像顶部右下对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35370394/