CSS文字環繞圖片效果

admin發表於2018-08-30
CSS

CSS實現的文字環繞圖片效果其實是比較奇特的佈局。

文字就像是流水一樣，能夠被周圍的環境塑造它的佈局形狀。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/30/003950x1zaq49hg4ba3941.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面就通過程式碼例項介紹一下，如何利用CSS實現此佈局效果，並簡單介紹一下原理。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.box{ 
  width:300px; 
} 
img{ 
  float:left;
  width:220px;
  height:100px;
}  
</style> 
</head> 
<body> 
<div class="box"> 
  <img src="http://www.softwhy.com/mytest/div+css/border.jpg"/>
  螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來，沒有任何人一開始就是高手，必須要通過自身的努力和奮鬥才行。
</div> 
</body> 
</html>

上述程式碼實現了文字環繞效果，之所以文字能夠環繞圖片，是因為圖片採用了左浮動。

原理分析如下：

大家知道，浮動的元素可以脫離文件流，這樣它原本佔據的位置就會騰空，它後面的元素就有機會填補上，浮動元素就好比起飛一樣，覆蓋到了非浮動元素上面。但是問題來了，按照通常的理解，既然圖片是浮動的，那麼自然會脫離文件流，它後面文字會填補它原來佔據的空間，但是為什麼文字像水流會環繞圖片流動，原因如下：

元素脫離文件流，不佔據元素的空間，但是依然會佔據文件流中文字的空間。

可能會遇到的問題：

這樣的問題出現的情況是極少的，幾乎不可能出現。但是這裡還是做一下介紹，感興趣的朋友可以參考一下。

如果文字內容是超級長的連續字元，那麼他就不會自動換行了，也就不會出現環繞效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.box{ 
  width:300px; 
} 
img{ 
  float:left;
  width:220px;
  height:100px;
}  
</style> 
</head> 
<body> 
<div class="box"> 
  <img src="http://www.softwhy.com/mytest/div+css/border.jpg"/>
  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA。
</div> 
</body> 
</html>

這是因為這種連續的字元或者數字，不會自動截斷換行，程式碼修改如下：

[CSS] 純文字檢視 複製程式碼
.box{ 
  width:300px; 
  word-break: break-all
}

修改後的執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/30/004108x00vxjvuvqnnnwjy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章