首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

如何在图片浮动时不让文字内容环绕到图片下方

作者: CodeBit     来源: CodeBit.cn     时间: 2007-05-20 15:31:07
摘要: 类似左侧图片右侧文字的排版方式我们经常能够见到，但是，有许多网友都遇到过一个问题：在图片浮动到一侧时，超出图片高度的文字往往会环绕到图片的下方，本文给出了解决方案。
归类: (X)HTML/CSS,

关键词: 浮动, float, 图片, 图文, img, 环绕,

小标题:
类似左侧图片右侧文字的排版方式我们经常能够见到，但是，有许多网友都遇到过一个问题：在图片浮动到一侧时，超出图片高度的文字往往会环绕到图片的下方。


ghettocooler.net 的解决方案：


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


CSS:
  1.  
  2. <style type="text/css"> 
  3.  
  4. .callout { 
  5.     border:1px solid #000; 
  6.     float:left; 
  7.     width:275px; 
  8. } 
  9.  
  10. .callout h3 { 
  11.     width:115px; 
  12.     height:65px; 
  13.     float:left; 
  14.     text-indent:-8008px; 
  15.     background:transparent url(team-report.gif) no-repeat 0 0; 
  16. } 
  17.  
  18. .callout * { 
  19.     width:160px; 
  20.     float:right; 
  21. } 
  22.  
  23. .callout * * { 
  24.     width:auto; 
  25.     float:none; 
  26. } 
  27.  
  28. </style> 
  29.  



HTML:
  1.  
  2. <div class="callout"> 
  3.     <h3>team report graphic, replaced image</h3> 
  4.     <h2>Team Report 10-06-05</h2> 
  5.  
  6.     <ul> 
  7.         <li>An <a href="#">anchor tag</a> perhaps?</li> 
  8.         <li>Or a <strong>strong tag</strong> perhaps?</li> 
  9.     </ul> 
  10.  
  11.     <p>Here's a paragraph too!</p> 
  12. </div> 
  13.  


原文请浏览：
http://www.ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/


相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)