首页 > > 网页制作 > css >

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

2008-02-23 08:34:34来源：互联网阅读 ()

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

　　先看看代码:

以下是引用片段：
<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;}

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

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

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

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有