我正在尝试将我的社交图标定位到浏览器的右侧,以便当浏览器调整大小时,它们始终保持在浏览器右侧。这是一个 JSfiddle,展示了它们目前的行为:http://jsfiddle.net/SHHM8/。
我曾试图使用以下代码将名为“fixedsocial”的容器向屏幕右侧浮动:
然而,这并没有起到任何作用。
因此,请将图标固定在浏览器的中心右侧。非常感谢您的帮助。
HTML
<div id="fixedsocial">
<div class="facebookflat"></div>
<div class="twitterflat"></div>
</div>
CSS
#fixedsocial {
top:30%;
height:200px;
width:60px;
position:fixed;
}
.facebookflat {
background:url("http://placehold.it/50x50");
height:50px;
width:50px;
transition:ease 500ms;
background-size:50px;
opacity:1;
}
.facebookflat:hover {
background:url("http://placehold.it/50x50");
height:50px;
width:50px;
background-size:60px;
opacity:0.5;
transition:ease 500ms;
margin-left:-20px;
width:70px;
}
.twitterflat {
background:url("http://placehold.it/50x50");
height:50px;
width:50px;
transition:ease 500ms;
background-size:50px;
opacity:1;
}
.twitterflat:hover {
background:url("http://placehold.it/50x50");
height:50px;
width:50px;
background-size:60px;
opacity:0.5;
transition:ease 500ms;
margin-left:-20px;
width:70px;
}
我曾试图使用以下代码将名为“fixedsocial”的容器向屏幕右侧浮动:
float:right;
然而,这并没有起到任何作用。
因此,请将图标固定在浏览器的中心右侧。非常感谢您的帮助。