大佬教程收集整理的这篇文章主要介绍了HTML – 如何在引导程序缩略图上进行叠加?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我到目前为止的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,但我觉得桌面全屏看起来很有趣.
基本上,您需要在图像和标签周围放置一个包装器,以便您可以将标签放在此包装器中:
<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设置为您想要的偏移量.
以上是大佬教程为你收集整理的HTML – 如何在引导程序缩略图上进行叠加?全部内容,希望文章能够帮你解决HTML – 如何在引导程序缩略图上进行叠加?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。