Question

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

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

我希望这是可以理解的

修改基本上我希望图像的行为像容器，而不使用“background-image”

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

Answer 2

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

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

Answer 3

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

style="float:right";

Answer 4

绝对定位的元素将始终定位与其父级相关的位置：相对的＆＃39;。这是一个很好的例子http://learnlayout.com/position.html

因此，如果您将内容和内容包装在div中并相对定位，那么您可以将内容完全放在其中。然后，你只需要进行显示：block;和宽度100％所以将填满整个容器。

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

以下是一个例子：http://jsfiddle.net/kbzvyjy9/

希望能解决您的问题。

将div放在图像内（响应）

4 个答案: