0

これは、ソーシャル共有リンクの html です。

'<div id="social_share">
   <ul>
    <li id="facebook">
     <a href="http://www.facebook.com" target="_blank"><img src="'. plugins_url( '/32x32/facebook35x35.png' , __FILE__ ) .'" /></a>
    </li>
    <li id="twitter">
     <a href="http://www.twitter.com" target="_blank"><img src="'. plugins_url( '/32x32/twitter35x35.png' , __FILE__ ).'" /></a>
    </li>
    <li id="gplus">
     <a href="http://www.plus.google.com" target="_blank"><img src="'.plugins_url( '/32x32/googleplus35x35.png' , __FILE__ ).'" /></a>
    </li>
    <li id="youtube">
     <a href="http://www.youtube.com" target="_blank"><img src="'.plugins_url('/32x32/youtube35x35.png', __FILE__).'" /></a>
    </li>
  </ul>
</div>'

これは、ページの右側にフロートさせる CSS です。

/*GLOBAL STYLES*/
#facebook, #twitter, #gplus, #youtube{
    list-style-type: none;
}
/*MEDIA QUERIES*/
@media only screen and (min-width: 980px) {
#social_share{
    position: fixed;
    float: right;
    z-index: 10;
    right:10px;
    top:350px;
}
}
@media only screen and (max-width: 480px) {
#social_share{
    /*z-index: 10;*/
    position: relative;
    bottom: 0;
    width: 50%;
    margin-right: auto;
    margin-left: auto;
}
#facebook, #twitter, #gplus, #youtube{
    display: inline-block;
}
}

画面サイズが 980px 未満になったときにページの下部に配置するにはどうすればよいですか。の

bottom: 0;

しかし、うまくいきません。注意: 画面の下部にくっつきたくありません。ページの一番下に置きたい。

4

1 に答える 1

1

これが私がフッターによく使うトリックです。これは、コンテンツがウィンドウの高さよりも小さい場合にのみ下にくっつきます。

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

于 2013-10-17T13:01:56.270 に答える