3

ここで少し例を挙げて説明します。

いくつかのコンテンツを含む html ページが既にあり、そのコンテンツを変更せずに、div を上部に残して、既存のコンテンツの真ん中にメッセージを挿入 (画像の挿入など) したいと考えています。

css 作業を行う前のこの図を見てください。

http://i.stack.imgur.com/uhJbx.png

説明:コンテンツの上部にある div を持つコンテンツに挿入された画像が上部にあります

css を適用した後、次のように、コンテンツの間に何かを配置したいと思います。

http://i.stack.imgur.com/67YFf.png

説明: css がコンテンツの中央に配置された状態で挿入された画像ですが、div は上部にあります

HTML:

<div class="myimg">
    <img src=http://s14.postimg.org/miss2r3xt/html_css.jpg />
</div>
<p>Some paragraph    </p>

<strong>What is HTML?</strong>

<strong>What is CSS?</strong>
<p>Some paragraph</p>

CSS:

.myimg {
    position: absolute;
}

jsfiddleで変更しようとしている簡単な例のリンクを次に示します。

あなたたちが助けることができるかどうか教えてください!!!

4

3 に答える 3

2

CSS でいくつかの要素を追加するには、:afterと:beforeを参照してください。

たとえば、この行をcssに追加できます

strong:before{ 
    content:url('http://s14.postimg.org/miss2r3xt/html_css.jpg'); 
}
于 2013-07-31T10:26:46.523 に答える
2

jQuery ソリューションを受け入れる場合、コンテンツの最初の段落の後に画像が配置されます。

$(document).ready(function(){
    var theImg = $('.myimg').remove(); 
    $('p').first().after(theImg);
});

コンテンツにマーカーがある場合は、 の代わりにそのマーカーを使用します$('p').first()。

このアプローチで更新されたあなたのフィドル：

http://jsfiddle.net/ZjCfp/9/

于 2013-07-31T10:28:05.413 に答える
1

以下の css を試して、html コンテンツを変更せずに画像を配置します。

.myimg {
margin-top: 100px;
}
div.myimg + p {
 position: absolute;
  top: 0px;
    left: 0px;


}

ここで動作するデモを見てください:デモ

于 2013-07-31T10:21:32.483 に答える