Question

我有一个＆＃39;文本框＆＃39;根据从数据库中获取的句子（字符串）的长度来改变大小。

我希望这个文字显示在实际图像的右下方，但不知何故div大于实际图像。

如何确定图像的底部？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

Make the image the same width as the wrapper, #header-img in your example, then use the wrapper to position the text.

#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>

将text-div对齐在图像顶部的右下角

2 个答案: