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

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

Mary-Kate Olsen
發布: 2024-12-13 06:46:14
原創
780 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板