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 の float を削除し、display:inline; を使用します。.social-icon とフッター用 p

于 2013-09-10T08:30:25.707 に答える
0

私はあなたのページにアクセスしましたが、それはあなたとcssで使用されている別の要素の下の要素であるという事実のためにfloat:right;（firebugのようなデバッガーを使用し、チェックを無効にします）、下部にありません。float:right;blockblockdisplay:inline-block;.social-iconfooter p

結論は

footer p{
    display:inline-block;
}

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

そしてブーム！私はあなたのサイトのfirebugでこれを行いましたが、うまくいきました。

于 2013-09-10T08:23:47.800 に答える