css - 等距 div——将它们锚定到背景图像——不管窗口大小？

Question

我有一个 1387 像素宽的联系栏 (.png) 和覆盖它的四个包含联系信息(电子邮件、twr、fb)的相同 div。它应该是这样的:

问题:无论窗口大小如何，我如何将联系人 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 中平均分配空间而不用担心窗口大小。