1

幅 1387 ピクセルの連絡先バー (.png) と、それをオーバーレイする連絡先情報 (電子メール、twr、fb) を含む 4 つの同一の 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!!!

私はいくつかの新鮮な目をいただければ幸いです。ありがとうございました！

4

2 に答える 2

0

問題はそれで#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>

そして、これらのスタイルは.contactdiv を均等に中央に配置しました。

#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;
}
于 2013-02-08T17:57:46.677 に答える
0

主な問題は、 #contact-row が に設定されていることだと思いますwidth: 100%。width: 1387pxそれが常に幅になるので、に設定する必要があります。.contactそうすれば、ウィンドウのサイズを気にせずに、divを均等に配置できるはずです。

于 2013-02-07T21:16:09.323 に答える