热搜：编程 Python Microsoft 编程语言 C++

CSS高级技巧:文字环绕图片

发布时间：2023-05-28 22:40:55 来源：互联网

.

你虚度的今日是昨日逝去的人无限向往的明天。美丽的早晨，把压力释放，清凉的秋风，把欢乐吹响，温柔的阳光，把温馨点亮，轻松的心情，把幸福送上，早安！

上一篇CSS好代码教程 文章：CSS高级技巧:滑动门文字环绕图片(SandBags)
在印刷业中, 常用的文字图片混搭的排版法被延伸到了Web视觉设计中, 如何来完成呢?
这里说的并不是简单的文字包围图片, 不过原理很类似, 同样是通过float属性来完成效果的. 先看一看效果图:

这应该不是简单的图片float能完成的了吧?
不过实现的原理还是不是很推荐, 因为有相当多的额外标签, 整份文档看起来并不是非常语义化.
说归说, 示例代码还是要给出来的.
HTML代码如下:

<div class="wrap_area">
<img src="wrap-subject01.jpg" class="no_border" alt="Lunar eclipse photo" />
<div class="shape_wrap">
<div style="width: 250px;"></div>
<div style="width: 280px;"></div>
<div style="width: 305px;"></div>
.
.
.
</div>
<p>Numerous blocks of text</p>
.
.
.
</div>

CSS代码大致如下:

div.wrap_area { position: relative; }
div.wrap_area img { position: absolute; left: 0px; top: 0px; }
div.wrap_area p { position: relative; }
div.shape_wrap div { float: left; clear: left; height: 20px; }

CSS掌握的不错的同学们应该就已经知道其中的奥妙了, 同样是利用 float 将div部分内容提出文档流, 然后等于是挖人工河一样, 用div的堆砌造出一条正文要通过的 "渠道".
适合于纯视觉化设计的效果.
下一篇CSS好代码教程 文章：CSS高级技巧:布局

到此这篇关于CSS高级技巧:文字环绕图片就介绍到这了。人性最可怜的就是:我们总是梦想着天边的一座奇妙的玫瑰园,而不去欣赏今天就开在我们窗口的玫瑰.更多相关CSS高级技巧:文字环绕图片内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： CSS