css中的浮動屬性值有哪些-css教學-PHP中文網

css中的浮動屬性值有哪些

王林

發布： 2023-01-03 09:25:09

原創

5141 人瀏覽過

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>

登入後複製