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

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

先看看代码:

以下是引用片段:

<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" />

<em class="a420"></em>

<em class="a430"></em>

<em class="a400"></em>

<em class="a370"></em>

<em class="a340"></em>

<em class="a300"></em>

<em class="a270"></em>

<em class="a250"></em>

<em class="a240"></em>

<em class="a230"></em>

<em class="a230"></em>

<em class="a340"></em>

<em class="a340"></em>

<em class="a360"></em>

<em class="a540"></em>

<em class="a540"></em>

<em class="a540"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a540"></em>

<em class="a460"></em>

<em class="a490"></em>

<em class="a500"></em>

<em class="a500"></em>

<p>"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?"<br />

"Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?"<br />

"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks."<br />

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.<br />

"What's the matter?" asked Piglet.<br />

"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?"<br />

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.<br />

"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.</p>

</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="/imagelist/06/24/4fnpgj5042e6.jpg" alt="Winnie the pooh" title="Winnie the pooh" />

<em class="a420"></em>

<em class="a430"></em>

<em class="a400"></em>

<em class="a370"></em>

<em class="a340"></em>

<em class="a300"></em>

<em class="a270"></em>

<em class="a250"></em>

<em class="a240"></em>

<em class="a230"></em>

<em class="a230"></em>

<em class="a340"></em>

<em class="a340"></em>

<em class="a360"></em>

<em class="a540"></em>

<em class="a540"></em>

<em class="a540"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a550"></em>

<em class="a540"></em>

<em class="a460"></em>

<em class="a490"></em>

<em class="a500"></em>

<em class="a500"></em>

<p>"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?"<br />

"Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?"<br />

"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks."<br />

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.<br />

"What's the matter?" asked Piglet.<br />

"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?"<br />

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.<br />

"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.</p>

</div>

</div>

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航