問題與css定位在wordpress列

Question

我有一個問題與定位在圖片頂部的標題。圖片在一列中，有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; 
} 

任何幫助表示讚賞。先謝謝你！！

Answer 1

我想通了！我在HTML中有一些額外的空格/中斷，使前三列與上一列不同。我添加/改變了一些事情span.caption並刪除了CSS的。去年span.caption

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 */ 
} 

由於任何人誰可能做了任何研究！