我在将标题放置在图片顶部时遇到问题。图片在一栏,有4栏。前 3 列似乎工作正常但当涉及到最后一列时,它看起来根本不正确,我觉得它可能与 wordpress css 有关?我试图将 css 添加到最后一列,它正确定位但宽度不正确......我很困惑。这可能是一个如此简单的修复,但我似乎无法弄清楚
这是网站的链接 http://aminkhalil.com
这是我的html代码
[fourcol_one]
<a href="#" class="caption">
<img class="hover" alt="Services" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Services</span></a>
[/fourcol_one]
[fourcol_one]
<a href="#" class="caption">
<img class="hover" alt="Keep Healthy" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Keep Healthy</span></a>
[/fourcol_one]
[fourcol_one]
<a href="#" class="caption">
<img class="hover" alt="Meet The Staff" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Meet The Staff</span></a>
[/fourcol_one]
[fourcol_one_last]
<a href="#" class="caption">
<img class="hover" alt="Portal" src="http://growinggood.com/wp-content/uploads/2014/02/billboard-slider-images.jpg" />
<span class="caption">Portal</span></a>
[/fourcol_one_last]
这是我的CSS
a.caption{
position:relative;
}
a:hover img.hover{
opacity: 0.5;
filter: alpha(opacity=530);
}
span.caption{
color: #fff !important;
position: absolute;
bottom: 0;
left: 2%;
padding: 1.9%;
width: 93%;
background-color: rgba(0,0,0,0.5);
}
.last span.caption{
bottom: 22px;
left: 3px;
}
感谢任何帮助。提前致谢!!
最佳答案
我知道了!!我在 HTML 中有一些额外的空格/中断,这使得前 3 列与最后一列不同。我向 span.caption 添加/更改了一些内容并删除了 .last span.caption 的 CSS
span.caption{
color: #fff !important;
position: absolute;
padding: 1.9%;
width: 93.5%;
background-color: rgba(0,0,0,0.5);
display: block; /* added */
bottom: 0; /* changed */
left: 3px; /* changed */
}
感谢所有做过研究的人!
关于html - wordpress 列中的 css 定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24413865/