Question

img在float:right;

之后移至最低点

这个页脚代码：

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;
}

Answer 1

这样做。

代码更改：

<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>

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

Answer 2

它们在段落下呈现。由于p标记是块级别的 - 因此它占据整个宽度。

你能做什么：

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

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

制作div。

答案 2 :(得分：1)

删除.social-icon的浮点数并使用display：inline; .social-icon和footer p

答案 3 :(得分：0)

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

总结

footer p

和BOOM！我在您网站上的萤火虫中做到了这一点并且工作正常。

Answer 3

删除.social-icon的浮点数并使用display：inline; .social-icon和footer p

Answer 4

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

总结

footer p

和BOOM！我在您网站上的萤火虫中做到了这一点并且工作正常。

浮动右后，img移动到底部

4 个答案: