WordPress列中的CSS定位问题答案

【问题标题】：issue with css positioning in wordpress columnsWordPress列中的CSS定位问题
【发布时间】：2014-06-26 10:18:38
【问题描述】：

在图片顶部放置标题时遇到问题。图片在一列，有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 css wordpress positioning captions

【解决方案1】：

我想通了！！我在 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 */
}

感谢任何可能进行任何研究的人！

【讨论】：