2014-11-24 11 views
0

我嘗試使用浮動文本實現bilboard。見截圖,請:響應式圖像中的奇怪填充

enter image description here

所以,我寫了這樣的代碼:

<div class="bilboard hcenter"> 
<div class="content"> 
    <div class="imwrap"><img src="img/dog.png" /></div> 
    <span>WE'RE THE SAME PASSIONATE PEOPLE</span> 
    <span>YOU KNOW AND LOVE</span> 
</div> 

和CSS:

div.hcenter { 
    margin-left: auto; 
    margin-right: auto; 
} 

.bilboard { 
    max-width: 1100px; 
    background-color: #cd1b31; 
    min-height: 205px; 
    height: auto; 
    width: 100%; 
    padding-top: 20%; 
    position: relative; 
    z-index: 0; 
} 

.bilboard .content { 
    margin-top: -20%; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.bilboard .content img { 
    width: auto; 
    height: 100%; 
    float: right;} 

.bilboard .imwrap { 
    float: right; 
    height: 100%; 
    background-color: yellow; 
} 

如果我調整我的HTML在firefox和IE中我看到這個奇怪的黃色填充在狗的左

enter image description here

在Chrome中一切都很好。

這是什麼和我錯了? 或者,也許我的方式是愚蠢的,代碼是最簡單的?有人可以幫我編碼嗎?

黃色只是表示問題。 imwrap塊有更大的寬度比img

+0

Scammy鏈接.....標記 – Billy 2014-11-24 22:38:55

+0

爲什麼?這是截圖 - 雲! – 2014-11-24 22:40:25

+0

這些鏈接不是騙子,檢查出來,它只是一個外國圖片上傳器,不像通常的imgur或imageshack等等。 – Stewartside 2014-11-24 22:41:07

回答

0

通讀你的問題,我認爲這可能是由於設置高度。我已經在下面的JSFiddle中測試過了,似乎工作正常。

HTML

<div class="bilboard hcenter"> 
    <div class="content"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/e/e2/Bon_toutou.png"/> 
     <span>WE'RE THE SAME PASSIONATE PEOPLE</span> 
     <span>YOU KNOW AND LOVE</span> 
    </div> 
</div> 

CSS

div.hcenter { 
    margin-left: auto; 
    margin-right: auto; 
} 

.bilboard { 
    max-width: 1100px; 
    background-color: #cd1b31; 
    min-height: 205px; 
    height: auto; 
    width: 100%; 
    padding-top: 20%; 
    position: relative; 
    z-index: 0; 
} 

.bilboard .content { 
    margin-top: -20%; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.bilboard .content img { 
    max-height: 100%; 
    width: auto; 
    float: right; 
    background-color: yellow; 
} 

JSFiddle

+0

jsfiddle無法顯示我的問題。 如果我使用開發人員工具,imwrap大於圖像...黃色僅用於顯示... – 2014-11-24 22:45:01

+0

您是否嘗試過透明方法了?見jsFiddle回答。 – Stewartside 2014-11-24 22:47:25

+0

忽略我,閱讀你的評論。一秒之內嘗試我的修補程序。 – Stewartside 2014-11-24 22:50:30