在 HTML/CSS 中實現圖像周圍的文字環繞
在圖像周圍實現文字環繞是網頁設計中的常見挑戰。要創建所需的效果,請按照下列步驟操作:
HTML 結構:
- 使用id 將圖像和任何周圍的文字包裹在容器div中屬性,例如#container。
CSS樣式:
- 為容器 div 定義特定寬度,以決定換行文字的寬度。
- 將 float: left 指派給包含影像的 #floated div。這會導致圖像向左浮動,從而允許文字在其周圍流動。
- 為 #floated div 設定特定寬度,以控制影像的寬度。
- 確保周圍有足夠的空間透過 #floated div 中的內邊距或邊距設定來調整影像。
範例程式碼:
#container{
width: 400px;
background: yellow;
}
#floated{
float: left;
width: 150px;
background: red;
}
登入後複製
其他資源:
其他資源:-
[MDN 網路文件: Float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
- [W3 學校:文字換行] (https://www.w3schools.com/css /css_text-wrap.asp)
以上是如何使用 HTML 和 CSS 將文字環繞圖像?的詳細內容。更多資訊請關注PHP中文網其他相關文章!