将div定位在图片内部（响应式）

Question

我有一个问题（显然）。 我需要将一个元素定位到图像的右侧。 但我不能使用img标签作为容器。 同时，我正在使用Bootstrap，这使得为容器设置固定宽度变得不可能。

小例子jsFiddle

<div id="container" class="col-lg-3">
  <div class="positioning">
      Some Text
  </div>
  <img src="http://placehold.it/300x200/eeeeee" />
</div>

我希望您能理解

编辑： 基本上我想让图片像一个容器一样运作，而不使用“background-image”。

- AlexG

---

你需要使用img标签吗？还是可以将div的背景设置为图片？ - lukevp

@lukevp 我觉得你需要使用图像标签来使 div 在调整大小时保持与图像相同的高度。 - Pete

这需要更多的解释。有太多的方式可以解释这个。 - austinthedeveloper

@Last1Here 很不幸，元素的位置是在容器中确定的，请稍微调整一下窗口大小。 - AlexG

@gotta_ask 请查看下面修订后的答案。 - Last1Here

Answer 1

将图像和标题包装在一个带有position: relative的div中，就像在这个Fiddle中一样。

HTML代码：

<div id="container" class="col-lg-3">
    <div class="img-container">
        <div class="positioning">
            Some Text
        </div>
        <img src="http://placehold.it/300x200/eeeeee" />
    </div>
</div>

CSS

.col-lg-3{
    width: 25%;
    min-width: 230px;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #aaa;
    text-align: center;
}
.col-lg-3 img {
    max-width: 100%;
}
.img-container {
    display: inline-block;
    position: relative;
}
.positioning{
    position: absolute;
    right: 15px;
    bottom: 22px;
    background-color: red;
    color: white;
    padding: 4px;
    font-size: 17px;
    line-height: 18px;
}

- Last1Here

---

如果你接受了某个人的答案并且喜欢它，那么你应该给他点赞！我也点了赞，因为这是被接受的答案，而且你对它感到满意。 - lukevp

好的，我现在无法点赞，因为我还没有足够的声望来执行这个操作 x) - AlexG

Answer 2

我认为<figure>标签是这里最好的解决方案。

以下是一个示例：http://jsfiddle.net/mzd7maqq/7/

- Jonnefoy

---

同样的问题出现在div上，"Some Text"元素被定位到了图像上，稍微调整一下窗口大小。 - AlexG

在这种情况下，只需将<figure>显示为内联块即可。[http://jsfiddle.net/mzd7maqq/7/]这与@Last1Here的答案相同，但它是HTML5友好的 :) - Jonnefoy

Answer 3

您可以使用float属性并将其设置为right。

style="float:right";

- 3Demon

---

很不幸，这并不简单，浮动位置又将其放到了错误的容器中。 - AlexG

Answer 4

绝对定位的元素总是相对于其父元素定位，该父元素具有 'position: relative' 的属性。这里有一个很好的例子 http://learnlayout.com/position.html

因此，如果您将 以及内容放在一个 div 中并相对定位，那么您可以在其中绝对定位内容。接下来，您只需要使 标签的 display 属性为 block，并将宽度设置为 100%，以便 标签填充整个容器。

.container {
    position: relative;
}
.container img {
    display: block;
    width: 100%;
}
.container .content {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

这是一个例子：http://jsfiddle.net/kbzvyjy9/ 希望能解决你的问题。

- sdjn