1

私は を持って<div>いborder:15pxます。フィドルで指定されているように、左隅に画像があります

http://jsfiddle.net/user1212/e7Gez/17/

さて、この画像はテキストを上から押し下げています。テキストを取得するにはどうすればよいですかmargin-top:0;

background-imageオーバーラップするので、画像をそのまま使用したくありません15px border。

解決策はありますか？

4

3 に答える 3

2

float: left;画像で使用するだけです。更新された Fiddleを参照してください。ネガティブmargin-rightを使用してテキストが左に押し出されるのを防ぐこともできますが、その場合、テキストとz-index残りのコンテンツをいじる必要があります。つまり、スタイリング目的で HTML マークアップを追加する必要があります。この Fiddleを参照してください。

于 2012-09-20T17:55:34.373 に答える
0

OK、私は他の答えをより直接的な「これがあなたのやり方で物事を修正する方法です」という答えとして残しますが、ここでのより良いアプローチは使用することだと思いますposition: absolute;-これははるかに手間をかけずに効果を達成します.

フィドル

私は次のように画像をスタイリングしています：

img#post-backgrnd {
    position: absolute;
    top: -1px;
    left: 0px;
}

これにより、画像が必要な場所である左上隅に強制的に配置され (これtop: -1px;は、画像が境界線とわずかにずれているためです)、position: absolute;スペースを占有しないため、テキストをプッシュしません。まったく。ただし、このようにすると、画像がテキストを覆い隠してしまいます。ここでのより良い解決策は、画像を編集して位置合わせの問題を修正し (そして に進みtop: 0;)、白い部分を実際に透明にすることです。

何らかの理由でそれができない場合は、 を使用してこのオーバーラップの問題を修正できますz-indexが、それは、親、画像、およびテキストに 3 つの異なるz-index値が必要であることを意味します。つまり、テキストに新しい要素が必要であることを意味します。この例については、この Fiddleを参照してください。

于 2012-09-20T18:36:48.503 に答える
-1

好きなように追加vertical-align:topしてください<div>：

.content {
  width: 500px;
  height: 500px;
  border: 15px solid #E4EAF3;
  /*  background: #ffffff url('http://smitra.net76.net/post-bg.jpg') no-repeat top left;*/
  margin-top:0;
  padding-top:0;
  vertical-align:top;
}

jsfiddleでそれを見る

于 2012-09-20T17:57:12.677 に答える