twitter-bootstrap 将 div 定位在图像内（响应式）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27253263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position div inside a image (responsive)
提问by AlexG
I have a problem (obviously). I have to position a element to be always on the right side of a image. But I can't use the img-Tag as a container. Also I'm using bootstrap, which makes it impossible to set a fixed width for the container.
我有问题（显然）。我必须将元素放置在图像的右侧。但是我不能使用 img-Tag 作为容器。此外，我正在使用引导程序，这使得无法为容器设置固定宽度。
Small example jsFiddle
小例子jsFiddle
<div id="container" class="col-lg-3">
<div class="positioning">
Some Text
</div>
<img src="http://placehold.it/300x200/eeeeee" />
</div>
I hope that is understandable
我希望这是可以理解的
EDIT:Basically I want the image to behave like a container, without using "background-image"
编辑：基本上我希望图像表现得像一个容器，而不使用“背景图像”
回答by Last1Here
Wrap the image and the caption in a div with position: relativelike in this Fiddle
将图像和标题包裹在一个 div 中，position: relative就像在这个Fiddle 中一样
html
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
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;
}
回答by Jonnefoy
I think the <figure>tag is the best solution here.
我认为<figure>标签是这里最好的解决方案。
Here's an exemple: http://jsfiddle.net/mzd7maqq/7/
这是一个例子：http: //jsfiddle.net/mzd7maqq/7/
回答by 3Demon
You can use the float property and set it to right.
您可以使用 float 属性并将其设置为右侧。
style="float:right";
回答by sdjn
An absolutely positioned element will always be positioned relating to it's parent that has 'position: relative'. Here is a good example http://learnlayout.com/position.html
绝对定位的元素将始终与其具有“位置：相对”的父元素相关联。这是一个很好的例子http://learnlayout.com/position.html
So if you wrap the and the content inside a div and position it relatively, then you can position the content absolutely inside it. Then, you just need to make the display: block; and width 100% so the will fill the whole container.
因此，如果您将 和 内容包装在一个 div 中并相对定位，那么您可以将内容绝对定位在其中。然后，你只需要让 display: block; 和宽度 100% 这样将填满整个容器。
.container {
position: relative;
}
.container img {
display: block;
width: 100%;
}
.container .content {
position: absolute;
bottom: 10px;
right: 10px;
}
Here's an example: http://jsfiddle.net/kbzvyjy9/
这是一个例子：http: //jsfiddle.net/kbzvyjy9/
Hope that solves your issue.
希望能解决您的问题。
