这是社交分享链接的 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;
但它不起作用。请注意：我不希望它粘在屏幕底部。我想要它在页面的底部。