首頁 >web前端 >css教學 >如何在 HTML/CSS 中使文字環繞圖像?

如何在 HTML/CSS 中使文字環繞圖像?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-13 06:46:14772瀏覽

How Can I Make Text Wrap Around an Image in HTML/CSS?

在HTML/CSS 中文字環繞影像

問題:

我們可以建立一個環繞影像的文字區塊嗎?圖像就像圖像提供嗎?

答:

當然可以!為了達到這種效果,需要使影像容器浮動。操作方法如下:

HTML 程式碼:

<div>

CSS 程式碼:

#container {
    width: 400px;
    background: yellow;
}

#floated {
    float: left;
    width: 150px;
    background: red;
}

結果:

容器的固定寬度(400 像素)和黃色背景創建一個文字區塊。寬度為 150 像素、紅色背景的浮動圖像 (#floated) 位於左側,允許文字在其周圍流動。

互動範例:

此技術的現場示範可在 JSFiddle 上找到:http://jsfiddle.net/kYDgL/

以上是如何在 HTML/CSS 中使文字環繞圖像?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn