我正在研究我的投资组合。我在这里有这个页面:
第一张照片上有一个日期。我想在底部写一个文字,如下:
但我无法放置该文字。每当我添加一个div标签并在文本中设置时,它就会超出图片范围。我想这是div标签必须在哪里?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
</div>
</div>
</div>
答案 0 :(得分:3)
如果我们谈论的是h2元素,那个html标记位于默认隐藏的元素内,并且仅在悬停时出现。
我会将它移到.image-caption div
之外 <div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
</div>
</div>
并给它那些风格
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
调整底部和左侧值以匹配设计的定位
答案 1 :(得分:1)
你必须为你的图片标题类创建一个css,它将处于绝对位置,这意味着它可以与其他东西发生冲突。这可以帮助您:Position absolute but relative to parent。然后确保你的z-index正确,所以它不在图像后面