如何在图片浮动时不让文字内容环绕到图片下方
类似左侧图片右侧文字的排版方式我们经常能够见到,但是,有许多网友都遇到过一个问题:在图片浮动到一侧时,超出图片高度的文字往往会环绕到图片的下方。
ghettocooler.net 的解决方案:
<style type="text/css"> .callout { border:1px solid #000; float:left; width:275px; } .callout h3 { width:115px; height:65px; float:left; text-indent:-8008px; background:transparent url(team-report.gif) no-repeat 0 0; } .callout * { width:160px; float:right; } .callout * * { width:auto; float:none; } </style>
<div class="callout"> <h3>team report graphic, replaced image</h3> <h2>Team Report 10-06-05</h2> <ul> <li>An <a href="#">anchor tag</a> perhaps?</li> <li>Or a <strong>strong tag</strong> perhaps?</li> </ul> <p>Here's a paragraph too!</p> </div>
原文请浏览:
http://www.ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
用背景图的方式实现在图片浮动时不让文字内容环绕到图片下方
这个方法的好处是代码简单,使用方便,当然,前提是你不需要在图片上加链接。
<style type="text/css"> .callout { background:url('logo.gif') no-repeat 5px 5px; padding:5px 5px 5px 230px; border:1px solid #999; width:60%; margin:0 auto; } .callout h2 { margin:0; padding:0; } </style>
<div class="callout"> <h2>CodeBit.cn - 聚合小段精华代码</h2> <p>在编程的过程中,我们通常都会积累很多简单、有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。</p> </div>