網頁佈局中實現文字圍繞圖片

在做網頁佈局的過程中常常遇到文字圍繞圖片的效果。如何用CSS實現文字環繞圖片的效果呢,通過這個例子就能看出。

其實很簡單,就是圖片浮動位置的調整。

以下是詳細代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style>
div {
width:300px;
border:1px solid red
}
img {
float:left;
width:100px;
height:100px
}
</style>
<div>
<img src="http://www.mianfeimoban.com/images/logo1.gif" />
我要實現左上角是圖片,然後就是文字環繞在圖片的右邊,像下面的效果圖一樣。我要實現左上角是圖片,然後就是文字環繞在圖片的右邊,
像下面的效果圖一樣。我要實現左上角是圖片,然後就是文字環繞在圖片的右邊,像下面的效果圖一樣。我要實現左上角是圖片,然後就是文
字環繞在圖片的右邊,像下面的效果圖一樣。我要實現左上角是圖片,然後就是文字環繞在圖片的右邊,像下面的效果圖一樣。我要實現左上
角是圖片,然後就是文字環繞在圖片的右邊,像下面的效果圖一樣。
</div>


歡迎轉載!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章