搜尋

首頁 >web前端 >css教學 >css中的浮動屬性值有哪些

css中的浮動屬性值有哪些

王林
王林原創
2021-02-24 16:28:355147瀏覽

css中的浮動屬性值有：left、right、none、inherit。 float浮動屬性可以使元素向左或向右移動，其周圍的元素也會重新排列，往往用於圖像佈局中。

css中的浮動屬性值有哪些

本文操作環境：windows10系統、css 3、thinkpad t480電腦。

浮動屬性介紹：

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。 Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。

浮動屬性：

clear    指定不允許元素周圍有浮動元素（清除浮動）。

  • left

  • right

  • #both

# #none

  • inherit 

  • #float    指定一個盒子（元素）是否可以浮動。

  • left

  • right

#none


inherit

css中的浮動屬性值有哪些

範例：

<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img  class="thumbnail" src="/images/klematis_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis2_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis3_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis4_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis2_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis3_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis4_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
</body>
</html>
css中的浮動屬性值有哪些執行結果：

################################################################################################### ###相關推薦：###CSS教學######

以上是css中的浮動屬性值有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css引入本地圖片的方法是什麼下一篇：css引入本地圖片的方法是什麼

相關文章

看更多