我正在使用具有响应式布局的
twitter bootstrap 2.1.1,我想在图像的右下角浮动一个标签.我遇到的问题之一是因为它在缩略图宽度大于其浮动太远的图像时响应.另一个问题是我似乎无法让它向右浮动.我还应该补充一点,虽然我想要它在右下角我想要它偏移几个像素,它不是在图像的边缘.此外,文本可能始终缺少照片,即只显示默认图像.
这是我到目前为止的HTML
<li class="span4">
<div class="photo-group thumbnail">
<a href="/recipes/50500235aa113eb1870001d8" class="photo-wrapper">
<img alt="300x200&text=photo" src="http://www.placehold.it/300x200&text=Photo">
<span class="label label-inverse photo-label">Photo Missing</span>
</a>
<div class="caption">
<div class="pull-right">
by <a href="/users/50494983aa113ebd5c000001">
hadees
</a>
</div>
<a href="/recipes/50500235aa113eb1870001d8">Chocolate Crackle Cookies</a>
</div>
</div>
</li>
这是我的CSS
.content-header {
padding-bottom: 10px;
}
.thumbnail > a > img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.photo-group .photo-wrapper {
position: relative;
}
.photo-group .photo-wrapper .photo-label {
position: absolute;
bottom: 0;
}
.photo-group .photo-wrapper .photo-label {
float: right;
}
我还得到了一个更好的例子jsfiddle.
也许处理这个问题的正确方法是让照片组的最大宽度为300,但我觉得桌面全屏看起来很有趣.
解决方法
这是我的小提琴版：
http://jsfiddle.net/AdVCT/9/
基本上,您需要在图像和标签周围放置一个包装器,以便您可以将标签放在此包装器中：
<div class="photo">
<img alt="..." src="..." />
<span class="label label-inverse photo-label">Photo Missing</span>
</div>
然后使用一些CSS,您可以将.photo更改为居中,但也只能改变其中的图像(标题是绝对定位的,因此它有效地从页面流中取出并且不会影响父级的宽度等等.)：
.photo-group .photo-wrapper .photo {
position: relative;
margin: 0 auto;
display: table;
}
并从.thumbnail>中删除margin-left：auto / margin-right：auto. a> img规则.最后,要从图像的两侧略微偏移标签,请使用：
.photo-group .photo-wrapper .photo-label {
position: absolute;
bottom: 5px;
right: 5px;
}
并将5px设置为您想要的偏移量.
