頁面中用css屬性怎麼控制圖片自訂浮動？ （例）
- 藏色散人原創
- 2018-08-10 14:19:436108瀏覽
新手在設計web頁面時，偶爾就圖片浮動的問題會產生一些困擾，不知從何下手。本篇文章主要針對大家介紹css浮動的相關知識，希望對需要的朋友有幫助。首先這裡就需要大家來了解css中的一個重要屬性浮動float。
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文字圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會產生一個區塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
css圖片浮動（向左）具體程式碼範例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css左浮动代码测试</title>
<style>
img
{
float:left;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="2.png" / alt="頁面中用css屬性怎麼控制圖片自訂浮動？ （例）" >
php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修
改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线
修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
</body>
</html>以上程式碼測試效果如下圖：
css圖片浮動（向右）具體程式碼範例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css右浮动代码测试</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="2.png" / alt="頁面中用css屬性怎麼控制圖片自訂浮動？ （例）" >
php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修
改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线
修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
</body>
</html>
附註：所有主流瀏覽器都支援float 屬性。任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。
假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
總結float可能的值：
left 元素向左浮動。
right 元素向右浮。
none 預設值。元素不浮動，並會顯示在文字中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。
那麼透過這篇關於css怎麼讓圖片浮動的問題就介紹到這裡，希望大家有所幫助，可供參考。
以上是頁面中用css屬性怎麼控制圖片自訂浮動？ （例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn