css文字環繞圖片實現方法

 

代碼如下

複製代碼

<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>

執行個體二

背景圖的方式實現在圖片浮動時不讓文字內容環繞到圖片下方
這個方法的好處是代碼簡單，使用方便，當然，前提是你不需要在圖片上加連結。

代碼如下

複製代碼

<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>www.111cn.net - 彙總小段精華代碼</h2> <p>在編程的過程中，我們通常都會積累很多簡單、有效並且可重用的小段代碼，一個簡單的字串處理函數或者一個驗證郵件地址的Regex，又或者一個簡單的檔案上傳類，甚至一個效果不錯的CSS導航樣式。這些小技巧為我們節省了不少時間，但是時間一長，代碼數量越來越多，尋找起來也耗費了不少時間。因此，本站致力於收集整理一些類似的小知識，並且努力提高文章搜尋品質，一來方便大家查閱，二來也算是支援一下開源事業。</p> </div>

執行個體

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; }

效果如下