同等空間divs - 錨定他們到背景圖像 - 不管窗口大小？

Question

我有一個1387px寬的接觸條（.png）和四個相同的divs，其中包含覆蓋它的聯繫信息（電子郵件，twr，fb）。這是它應該是什麼樣子：

問： 我怎麼同樣的空間接觸的div也不管窗口大小的他們錨背景圖像？

結構：

<div id="footer"> 
    <div id="contact-row"> 
     <div class="contact"> 
      <a class="email" href="mailto:#">email</a> 
      <a class="tw" href="http://twitter.com/#" target="_blank"></a> 
      <a class="fb" href="http://www.facebook.com/pages/#" target="_blank"></a>    
     </div> 
     ...+ 3 more divs with class of "contact" 
    </div> 
</div> 

樣式：

#footer { 
    width: 100%; 
    height: 178px; 
    background: url('../img/contact-bg.png') no-repeat center; 
    position: relative; 
    clear: both; 
} 

#contact-row { 
    width: 100%; 
    height: 178px; 
    border: solid 1px #aaa; 
    text-align: center; 
    overflow: hidden; 
    margin: 0 auto 0 auto; 
} 

.contact { 
    width: 150px; 
    height: 25px; 
    border: solid 1px #ccc; 
    display: inline-block; 
    margin: 0 50px; 
} 

我已經嘗試了許多不同的解決方案，但沒有留栓背景圖像或適應較小的瀏覽器窗口。工作副本可以在這裏找到：aaargb!!!

我會欣賞一些新鮮的眼睛。謝謝！

Answer 1

問題是#footer和#contact-row設置爲width:100%。取相對100％的寬度關閉都停止它相對於父寬度調整大小。

原來，#contact-row是不必要的。擺脫了它，並去：

<div id="footer"> 
    <div class="contact"> 
     <a class="email" href="mailto:#">email</a> 
     <a class="tw" href="http://twitter.com/#" target="_blank"></a> 
     <a class="fb" href="http://www.facebook.com/pages/#" target="_blank"></a>    
    </div> 
     ...+ 3 more divs with class of "contact" 
</div> 

而這些款式中心.contact同樣的div：

#footer { 
    width:1400px; 
    height:178px; 
    background:url('../img/contact-bg.png') no-repeat center; 
    margin:0 auto; 
    position:relative; 
    clear:both; 
    overflow:hidden; 
} 

.contact { 
    width:225px; 
    height:25px;  
    display:inline-block; 
    margin:0 50px 0 68px; 
} 

Answer 2

我認爲主要問題是你有＃contact-row設置爲width: 100%。您應該將其設置爲width: 1387px，因爲這將永遠是多麼寬。那麼你應該能夠平等地分配你的.contact divs，而不必擔心窗口大小。