0

Web サイトのポートレートの横に Twitter と Facebook の画像を配置しようとしていますが、配置を正しくするには、div を使用する必要があります。問題は、画像に div を追加してリンクを追加すると、div によって画像をクリックしてリンクに移動できなくなることです。画像を正しく配置する唯一の方法であるため、div を取り除くことはできません。以下に JSfiddle をコードとともに投稿します。

JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/

問題の領域:<div id="facebook"><a href="http://www.facebook.com"><img src="fb.png" height="101" width="101" /></a>

4

3 に答える 3

0

問題は、あなたが説明したとおりではありません。問題は、配置によって Twitter 要素が他の要素と重なり、クリックできなくなることです。

残念ながら、簡単な解決策はありません。<center>これを理解するために非推奨のタグを削除するなど、CSS 構造全体を再考する必要があると思います。幸運を。

于 2013-08-09T20:37:57.450 に答える
0

Z インデックスを使用します。

#twitter {
    position:relative;
    bottom:290px;
    left:168px;
    z-index: 1;
}
#facebook {
    position:relative;
    top:83px;
    right:168px;
    z-index: 5;
}

jsfiddle

ただし、このタイプの CSS スタイルは、この方法で使用しないでください。top、left、などのルールの使用はbottom、配置された要素rightを使用しない限り、配置に使用されることはほとんどありません。absolute

div を配置するためのプロパティだけでなく、使用方法marginも検討する必要があります。このコードの多くは取り出すことができます。paddingdisplay

于 2013-08-09T20:46:41.877 に答える
0

大変申し訳ありませんが、答えは次のとおりです。最新の HTML チュートリアルを実行してください。初心者から中級者向けのインタラクティブなコースがあり、直接フィードバックがあるCode Academyを試してみてください。役に立たない古い HTML 3/4 の本に行き詰まったようです。しかし、リンクの問題に対する直接的な答えも得ました。このフィドルでは、画像を背景画像として含め、クラスとセレクターを効率的に使用することで、何かを追加したい場合は非常に少ない行を書く必要があります (ほとんどの場合、コピーと貼り付け)。 . この CSS 部分で最も多くのことを行います。

.socialmedia a {
    display: block; /* Because the image is probably higher than the text */
    height: 50px; /* you have to set it to block and height 50px to show the image */
    padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
    padding-top: 12px; /* center in the middle of the image */
    padding-bottom: 12px;
    text-decoration: none;
}

例 g+: CSS:

.g a {
    background: url(logo_g_50x50.png) no-repeat;
}

HTML

<li class="g"><a href="plus.google.com/meeeeee">+1 me on g+</a></li>

そして完了！読みやすく、後で再利用または追加するために維持するのがさらに簡単です

于 2013-08-10T01:16:26.943 に答える