CSS+DIV:让文本字符环绕在你的图片周围

2022-07-15 80酷酷网 80kuku.com

　　css

　　看到上面的效果，你也许以为这是一张带文字的图片而已;呵呵，用你的鼠标去选取文字看看，发现了吧，这完完全全是一张图片和文字的组合，下面我就来介绍它是怎么做的。

　　先看看代码:

以下是引用片段：
<div id="info">
<h2>TRACKING YOUR IMAGES</h2>
<div id="holdit">
<img src="http://www.webjx.com/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;}

　　接着我们来分析一下红色加亮的部分:

　　首先将包容对象#holdit设置成相对定位(确保等下的img绝对定位以它左上角为原点)

　　接着把#holdit里面的img设成绝对定位且z-index高度为1，这样img就脱离文档流了

　　将em标签设置左浮动，高度和p的ling-height要一样，再根据图片的图案分别设置每个em的宽度(记得要用clear来清除浮动)

　　最后把P设置成相对定位且z-index高度设置大于img的数值

　　其实我们也可以直接将图片作为为#holdit的背景，这样就不需要专门为img来设置CSS了

<STYLE>#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;}</STYLE><div id="info"><h2>TRACKING YOUR IMAGES</h2><div id="holdit"><img src="http://www.webjx.com/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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]