同样空间divs - 将它们锚定到背景图像 - 无论窗口大小如何？

Question

我有一个1387px的宽接触条（.png）和四个相同的div，其中包含覆盖它的联系信息（email，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

我认为主要问题是你将＃contact-row设置为width: 100%。你应该把它设置为width: 1387px，因为它总是有多宽。然后你应该能够平等地将你的.contact div放在一边，而不用担心窗口大小。

Answer 2

问题是#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为中心平分：

#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;
}