0

CSS に画像がありますが、その画像へのリンクを追加したいので、CSS から画像を取り出し、アンカー タグを使用して HTML に直接挿入しました。

画像を div クラスの左上に揃えるのに問題があります。

<div class="logoHeader" style="height:125px; width:900px" >
    <a href="http://www.abc123.com/">
        <img src="images/logo.jpg" alt="" style="position:relative;" />
    </a>
</div>

追加してみました

style="padding-top:0px; padding-left:0px;"

しかし、画像は左上隅ではなく浮いています。

HTML を介して画像を左上隅に揃える方法について何か考えはありますか?

div タグ css は次のとおりです。

.logoHeader {padding:45px 20px 0px 20px;}
4

5 に答える 5

2

左上隅に配置する場合は、パディングにより float が発生します。設定したルールに準拠しています (マージンは45pxです)。

例については、http://jsfiddle.net/9KJA7/を参照してください。

/* Ignore */
.logoHeader {background-color: red}
img {height: 50px; width: 50px; background-color: green}

/* Your code */
.logoHeader {padding:45px 20px 0px 20px; position: relative}
​img {position:absolute;top:0px;left:0px;}​​​​​​
于 2012-09-05T16:55:30.950 に答える
1

私はあなたが探していると思います。

position: absolute;
top: 0;
left:0;

これがライブデモです。それともこれが欲しいですか？

于 2012-09-05T16:59:24.640 に答える
1

.logoHeader に設定されたパディングは、画像が左上隅に当たらないようにします。

于 2012-09-05T16:54:00.590 に答える
0

次のように、imgタグの絶対位置で試すことができます。

<div class="logoHeader" style="height:125px; width:900px; position: relative" ><a href="http://www.abc123.com/"><img src="images/logo.jpg" alt="" style="position:absolute; top:0px; left:0px;" /></a></div>

画像内の絶対位置を利用するには、divが相対位置である必要があります。これがお役に立てば幸いです。

于 2012-09-05T16:56:05.890 に答える
0

画像を常に固定したいですか？その場合、パディングを削除してこれを使用します。

.logoHeader {position: fixed; top: 0; left: 0; z-index: 5; padding: 0;}

フィドル: http://jsfiddle.net/3u8k6/

コードを確認してください: http://jsfiddle.net/3u8k6/1/

于 2012-09-05T16:54:42.567 に答える