在实际应用中,也可能需要一种很特殊的文字环绕方式希望文字能沿着图片中主体的—不规则边缘进行环绕,就像在矢量软件中做到的那样。但是div和img却都是以方块形式插入在页面中,而且浏览器也没有办法识别图片中的边缘(如下图),这时,就需要我们使用一些技巧性的手段来达到目的了。
如果我们希望能够有不规则的文字环绕效果,单独插入图片在段落中是不可行的,因为图片本身是方块状的矩型,无法改变其状态。因此只有将图片以背景形式放置在文本之中,背景乓与文本是二层关系,互相之间不会影响,而接下来就是本例中的核心内容—使用多个Div对象来创建接近不规则的形状,所要做的是插入一些div在段落。
们插入了9个div对象,并且保持其中内容为空的状态。我们希望9个div每个方块各自拥有自己的长和高,最终形成一个类似不规则的边缘效果。首先9个方块都采用float:ldt;进行排列,与此同时,每个方块都采用了clear:letl;使其左边不充许出现浮动对象,这样,每个div之间都不会互相浮动,但是文本因为没臺皇至:就贴到了所有div的右边。与此同时,对每个div我们都设置不同的高度与贾度,以在页面中挤出空间,最终显示的效果如图,一而如果想进。步了解这些空间是如何产生的,不妨给div都加上背景色或边框属性来看它们实际的占位情况。可以看到,实际上不规则的边缘是由多个div因为宽度不一样而造成的i在大片的排版设计中,这种方法还是可以经常使用到。天津网站建设,天津网站制作,天津做网站,天津网站优化