CSS+DIV:讓文本字符環繞在你的圖片周圍

2024-04-27 13:55:38

字體：大中小

來源：轉載

供稿：網友

　　看到上面的效果，你也許以為這是一張帶文字的圖片而已;呵呵，用你的鼠標去選取文字看看，發現了吧，這完完全全是一張圖片和文字的組合，下面我就來介紹它是怎么做的。

　　先看看代碼:

以下是引用片段：
<div id="info">
<h2>TRACKING YOUR IMAGES</h2>
<div id="holdit">
<img src="/imagelist/06/24/4fnpgj5042e6.jpg" alt="Winnie the pooh" title="Winnie the pooh" />




























"I shall have to wait until I catch up with it," said Winnie-the-Pooh. "Now, look there." He pointed to the ground in front of him. "What do you see there?" 
"Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?" 
"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks." 
With these few Words he went on tracking, and Piglet, after watching him for a minute or two, ran after him. Winnie-the-Pooh had come to a sudden stop, and was bending over the tracks in a puzzled sort of way. 
"What's the matter?" asked Piglet. 
"It's a very funny thing," said Bear, "but there seem to be two animals now. This--whatever-it-was--has been joined by another--whatever-it-is--
and the two of them are now PRoceeding in company. Would you mind coming with me, Piglet, in case they turn out to be Hostile Animals?" 
Piglet scratched his ear in a nice sort of way, and said that he had nothing to do until Friday, and would be delighted to come, in case it really was a Woozle. 
"You mean, in case it really is two Woozles," said Winnie-the-Pooh, and Piglet said that anyhow he had nothing to do until Friday. So off they went together.
</div>
</div>

　　以下是引用片段：
#info h3{ text-align:center;
}
#holdit {width:700px; position:relative; margin:3em auto; padding:10px; border:1px solid #ddd;}
#holdit img {position:absolute; z-index:1; top:10px; left:10px; }
#holdit p { margin:0px; position:relative; z-index:10; line-height:18px; text-align:justify; font-size:10px; font-family:verdana, arial, sans-serif}
#holdit em {display:block; float:left; height:18px; clear:left; overflow:hidden; }
.a230 {width:230px;}
.a240 {width:240px;}
.a250 {width:250px;}
.a270 {width:270px;}
.a300 {width:300px;}
.a340 {width:340px;}
.a360 {width:360px;}
.a370 {width:370px;}
.a400 {width:400px;}
.a420 {width:420px;}
.a430 {width:430px;}
.a460 {width:460px;}
.a490 {width:490px;}
.a500 {width:500px;}
.a540 {width:540px;}
.a550 {width:550px;}