在網頁設計中,如何讓段落文字環繞圖片呢?
這時候就需要使用CSS來控制段落的布局和圖片的位置。
<div class="wrapper"> <img src="圖片鏈接" alt="圖片描述"> <p>段落文字內容</p> </div>
我們首先需要將圖片和文字都放置在同一個容器內,這里我們使用了一個類名為wrapper的div。
為了實現文字環繞圖片的效果,我們需要給圖片設置浮動屬性。
.wrapper img { float: left; margin-right: 10px; }
這里我們將圖片設置為左浮動,并且給它設置了一個右邊距,以免文字和圖片之間沒有留出一定的間隔。
接下來我們需要設置段落的寬度,并給它設置一個左邊距,以便與圖片對齊。
.wrapper p { width: calc(100% - 120px); margin-left: 120px; }
這里我們使用了calc()函數來計算段落的寬度,120px是圖片的寬度和右邊距的值之和。
這樣設置之后,段落文字就會自動環繞在圖片的周圍,達到了最初的設計效果。
下一篇css正文距離頁面邊界