CSS文字環繞圖片效果
CSS實現的文字環繞圖片效果其實是比較奇特的佈局。
文字就像是流水一樣,能夠被周圍的環境塑造它的佈局形狀。
圖示如下:
下面就通過程式碼例項介紹一下,如何利用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 }
修改後的執行效果截圖如下:
相關文章
- CSS 文字環繞圖片CSS
- css實現文字和圖片居中效果CSS
- CSS3小球靜態環繞效果CSSS3
- CSS3邊框動態環繞效果CSSS3
- CSS3環繞動態邊框效果CSSS3
- CSS圓形圖片效果CSS
- CSS3滑鼠懸停圖片動畫 多種文字動畫效果CSSS3動畫
- CSS聚光燈文字(無圖片)CSS
- PHP實現水印效果(文字、圖片)PHP
- CSS3圖片旋轉效果CSSS3
- CSS圖片邊框陰影效果CSS
- CSS3圖片拉近放大效果CSSS3
- CSS圖片的灰色顯示效果CSS
- CSS圖片上面新增文字說明CSS
- css圖片陰影、文字陰影CSS
- CSS背景圖片作為連結效果CSS
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- CSS3圖片上下動畫浮動效果CSSS3動畫
- CSS滑鼠懸浮圖片模糊切換效果CSS
- CSS 邊框動態環繞CSS
- CSS元素(文字、圖片)水平垂直居中方法CSS
- app直播原始碼,為文字/圖片新增按壓效果APP原始碼
- 一個有意思的CSS圖片hover效果CSS
- 掀開圖片顯示介紹的css效果CSS
- css實現圖片灰度效果程式碼例項CSS
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- 分享 用CSS實現無圖片圓角效果CSS
- CSS3 文字效果CSSS3
- 使用CSS的clip-path實現圖片剪下效果CSS
- CSS3 background-position定位背景圖片動畫效果CSSS3動畫
- HTML CSS 實現滑鼠懸停時圖片拉近效果HTMLCSS
- 文字輪播與圖片輪播?CSS 不在話下CSS
- css地球月亮太陽環繞旋轉CSS
- CSS 文字立體凸起效果CSS
- CSS多行文字垂直居中效果CSS
- CSS3花屏文字效果CSSS3
- UIButton圖片文字控制元件位置自定義(圖片居右文字居左、圖片居中文字居中、圖片居左文字消失等)UI控制元件
- jquery css3跟隨滑鼠晃動的圖片效果jQueryCSSS3