CSS文字環繞圖片的例子

文字環繞是Microsoft Office Word軟體的一種排版方式，主要用於設定Word文檔中的圖片、文字框、快取圖案、剪貼畫、藝術字等對象與文字之間的位置關係。一般包括四周型、緊密型、襯於文字下方、浮於文字上方、上下型、穿越型等多種文字環繞方式。

但我們做網頁布局時，有時也需要這樣的樣式，那麼怎麼辦呢？其實是很簡單的，主要就是float的使用，具體請看下面例子：

HTML部分：
 

代碼如下

複製代碼

<div class="txt">     <p>         前端開發工程師是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過5         年，是指Web前端開發工程師的簡稱。 Web前端開發是從美工演變而來的，名稱上有很明顯的時代特徵。         在互連網的演化進程中，Web 1.0時代，         <img src="1.jpg" alt="This is a pic"/>         網站的主要內容都是靜態，使用者使用網站的行為也以瀏覽為主2005年以後，互連網進入Web 2.0時代，         各種類似案頭軟體的Web應用大量湧現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一         的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的互動形式為使用者提供了更好的使用體驗，         這些都是基於前端技術實現的。     </p>     <p>         隨著Web 2.0概念的普及和W3C組織的推廣，網站重構的影響力正以驚人的速度增長。XHTML+CSS布局、DHTML         和Ajax像一陣旋風，鋪天蓋地席捲而來，包括新浪、搜狐、網易、騰訊、淘寶等在內的各種規模的IT企業都對自己的         網站進行了重構。     </p> </div> CSS部分：   * {     margin: 0;     padding: 0; }       .txt {     margin: 50px auto;     width: 500px;     padding: 10px;     border: 1px solid #ccc;     font: 14px/20px "Microsoft YaHei";     color: #666; }       .txt p {     text-indent: 20px; }       .txt img {     float: left;     width: 180px;     height: 110px;     margin: 5px 10px 0 0; }

ok,運行後的效果就是這樣子的：

例子

代碼如下

複製代碼

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的堆砌造出一條本文要通過的路徑。