首頁 >web前端 >css教學 >使用CSS解決文字環繞圖片問題的代碼_經驗交流

使用CSS解決文字環繞圖片問題的代碼_經驗交流

PHP中文网
PHP中文网原創
2016-05-16 12:06:452149瀏覽


上圖是美工為一站點製作的圖文並茂的新聞標題列表,採用表格進行佈局,右上和下部分分佈在兩個單元格中,程序實現起來可不太容易:要么分兩次查詢,一次取4條,一次取5條;要麼一次取出9條,再分在兩個儲存格中顯示。能不能透過設定圖片的屬性,讓文字和圖片像word中一樣可以四周環繞對齊?這樣程式就不用理會圖片,只負責一次讀取顯示就可以了。經測試將圖片的float屬性設為left可解決我們的問題,效果如下圖:


<div align="left"><img  src=/upload/20071208230527665.gif    style="max-width:90%"  style="max-width:90%" style="float:left;" / alt="使用CSS解決文字環繞圖片問題的代碼_經驗交流" > 
·新闻标题列表<br> 
·新闻标题列表<br> 
·新闻标题列表<br> 
·新闻标题列表<br> 
·新闻标题列表新闻标题列表<br> 
·新闻标题列表新闻标题列表<br> 
·新闻标题列表新闻标题列表<br> 
·新闻标题列表新闻标题列表<br> 
·新闻标题列表新闻标题列表 
</div>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn