在图像中定位 div（响应式）答案

【问题标题】：Position div inside a image (responsive)在图像中定位 div（响应式）
【发布时间】：2015-01-30 22:14:09
【问题描述】：

我有一个问题（显然）。我必须将元素放置在图像的右侧。但我不能将 img-Tag 用作容器。另外我正在使用引导程序，这使得无法为容器设置固定宽度。

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

我希望这是可以理解的

编辑： 基本上我希望图像表现得像一个容器，而不使用“背景图像”

【问题讨论】：

类似于jsfiddle的东西？
您需要使用img标签还是可以将div的背景设置为图像？
@lukevp 认为你必须使用图像标签来使 div 在调整大小时保持图像的高度
这需要更多解释。有太多的方式来解释这一点。
@Last1Here 不好意思，元素定位在容器上，稍微调整一下窗口大小

标签： html css twitter-bootstrap responsive-design

【解决方案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;
}

【讨论】：

如果您接受并喜欢这个人的回答，您应该支持它！我也投了赞成票，因为这是公认的答案，您对此感到满意。
好吧，我不能在 atm 上投票，我现在没有足够的声望来这样做 x)

【解决方案2】：

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

这是一个例子：http://jsfiddle.net/mzd7maqq/7/

【讨论】：

div 也有同样的问题，“Some Text”元素被定位到图形上，稍微调整一下窗口大小。
在这种情况下，只需将 <figure> 显示为内联块 [jsfiddle.net/mzd7maqq/7/] 这与 @Last1Here 的答案相同，但它对 HTML5 友好 :)

【解决方案3】：

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

style="float:right";

【讨论】：

不幸的是没那么简单，float 再次定位到错误的容器中

【解决方案4】：

绝对定位元素的定位总是与其具有“位置：相对”的父元素相关。这是一个很好的例子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/

希望能解决您的问题。

【讨论】：