CSS文字围绕效果

前两天同事问我能不能用CSS实现这样一个效果,页面上有一段文本,但文本的左下方有一个图片,他希望文本在遇到图片时,能绕开图片。如果图片位于左上方的话,其实很容易做到,我同事遇到的这种情况我之前也没有处理过,研究了一下,发现了一种方法。

先来看看最终效果,红色的方块用来模拟图片:

image

完整的HTML如下:

<html>
<head>
<title>Untitled Page</title>
<style>
.left div
{
float: left;
clear: left;
margin-right:5px
}
.left .placeholder
{
margin-right:0px;
width:1px
}
.text
{
line-height: 20px
}
</style>
</head>
<body>
<div>
<div class="left">
<div class="placeholder" style="height: 60px">
</div>
<div style="width: 100px; height: 40px; background-color: red">
</div>
</div>
<div class="text">
Windows Phone是微软发布的一款手机操作系统,它将微软旗下的Xbox LIVE游戏、Zune音乐与独特的视频体验整合至手机中。2010年10月11日晚上9点30分,微软公司正式发布了智能手机操作系统Windows Phone,同时将谷歌的Android和苹果的IOS列为主要竞争对手。2011年2月,诺基亚与微软达成全球战略同盟并深度合作共同研发,建立庞大的生态系统。
</div>
</div>
</body>
</html>

简单解释一下,.left中的所有div都默认将float和clear都设置为left,这样做一方面能保证其他与这些div视觉上相邻的元素都会贴着它们,同时这些div自身又能保证独处一行。所以.text中的文本就会围绕.left中的所有div来呈现。

.text设置了line-height为20px,这样做是为了给.left中的div带来计算高度上的便利。.left中的第一个div是一个占位符,它的作用是把红色方块向下推一段距离,所以它设置了height为60px,即.text行高的3倍,也就是三行文本(同理红色方块的高度是两行文本)。此外,它的width是1px,而不是0px,这是为了兼容IE7所做的让步。

如果将这段代码拓展一下,我们还可以实现两边边框都扭曲的文本段,如下图所示:

image

完整的HTML代码如下:

<html>
<head>
<title>Untitled Page</title>
<style>
.border
{
padding:0px;
margin:0px;
list-style:none
}
.border .left
{
float: left;
clear: left;
margin-right:5px;
height:20px;
background-color:Red
}
.border .right
{
float: right;
clear: right;
margin-left:5px;
height:20px;
background-color:Blue
}
.border .placeholder
{
margin-left:0px;
margin-right:0px;
width:1px
}
.text
{
line-height: 20px
}
</style>
</head>
<body>
<div>
<ul class="border">
<li class="left placeholder">
</li>
<li class="right" style="width: 30px">
</li>
<li class="left" style="width: 10px">
</li>
<li class="right" style="width: 20px">
</li>
<li class="left" style="width: 20px">
</li>
<li class="right" style="width: 10px">
</li>
<li class="left" style="width: 30px">
</li>
<li class="right placeholder">
</li>
<li class="left" style="width: 20px">
</li>
<li class="right" style="width: 10px">
</li>
<li class="left" style="width: 10px">
</li>
<li class="right" style="width: 20px">
</li>
<li class="left placeholder">
</li>
<li class="right" style="width: 30px">
</li>
</ul>
<div class="text">
Windows Phone是微软发布的一款手机操作系统,它将微软旗下的Xbox LIVE游戏、Zune音乐与独特的视频体验整合至手机中。2010年10月11日晚上9点30分,微软公司正式发布了智能手机操作系统Windows Phone,同时将谷歌的Android和苹果的IOS列为主要竞争对手。2011年2月,诺基亚与微软达成全球战略同盟并深度合作共同研发,建立庞大的生态系统。
</div>
</div>
</body>
</html>

以上代码均在IE7、IE8以及Chrome16中表现良好。

发表评论

电子邮件地址不会被公开。 必填项已用*标注