![](/img/trans.png)
[英]CSS absolute positioning issue in IE and Firefox but not Chrome - Wordpress Template
[英]issue with css positioning in wordpress columns
將標題放在圖片上方時出現問題。 圖片在一列中,共有4列。 前三列似乎工作正常,但是到最后一列時,它看起來根本不正確,我覺得這可能與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列與后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 */
}
感謝任何可能做過任何研究的人!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.