0

img后移至底部float:right;

查看页脚：http: //qass.im/thestandard/

此页脚代码：

footer{
display:block;
margin:0 auto;
margin-bottom:50px;
width:800px;
height:100%;
clear:both;
}

.footer-content{
padding:80px;
padding-top:0;
padding-bottom:0;
}

footer p{
line-height: 1.714285714;
font-size:14px;
color:#555;
}

footer p a{
color:#555;
border-bottom:1px dotted #555;
}

.social-icon{
font-size:0;
float:right;
}
4

4 回答 4

2

这样做。

代码更改：

<div class="footer-content">

<div class="social-icon">
<a target="_blank" href="#"><img src="http://qass.im/thestandard/wp-content/themes/thestandard/images/twitter-footer.png"></a>
<a target="_blank" href="#"><img src="http://qass.im/thestandard/wp-content/themes/thestandard/images/facebook-footer.png"></a>
<a target="_blank" href="#"><img src="http://qass.im/thestandard/wp-content/themes/thestandard/images/google-footer.png"></a>
</div>

<p>
Powered by <a target="_blank" href="http://wordpress.org">WordPress</a> ©2013 The Standard, The Standard theme by <a target="_blank" href="http://qass.im/thestandard">Qassim.Dev</a>
</p>

</div>

这将使您的图像不会跳到底部。

于 2013-09-10T08:23:48.890 回答
1

它们在段落下呈现。由于p标签是块级的 - 所以它占据了整个宽度。

你可以做什么：

变体1：制作.footer-content p {float: left;}

变体 2：更改 html 中的顺序。在段落之前social-icon使用go类制作 div 。

于 2013-09-10T08:24:55.457 回答
1

删除 .social-icon 的浮动并使用 display:inline; 对于 .social-icon 和页脚 p

于 2013-09-10T08:30:25.707 回答
0

我访问了你的页面，它不在底部，因为float:right;（使用调试器 - 像 firebug - 并禁用float:right;检查），它在那里是因为它是你和css中使用的block另一个元素下的一个元素。blockdisplay:inline-block;.social-iconfooter p

综上所述

footer p{
    display:inline-block;
}

.social-icon{
    display:inline-block;
    font-size:0;
    float:right;
}

和繁荣！我在你网站上的萤火虫中做了这个，效果很好。

于 2013-09-10T08:23:47.800 回答