CSSのFloating属性値とは何ですか-CSSチュートリアル-php.cn

CSSのFloating属性値とは何ですか

王林

リリース： 2023-01-03 09:25:09

オリジナル

5141 人が閲覧しました

CSS のフローティング属性値は、left、right、none、inherit です。 float 属性は要素を左右に移動させることができ、周囲の要素も並べ替えることができるため、画像のレイアウトなどでよく使われます。

CSSのFloating属性値とは何ですか

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

フローティングプロパティの紹介:

CSS の Float は要素を左右に移動し、周囲の要素も再配置されます。 Float は画像によく使用されますが、レイアウトにも非常に便利です。

Floating 属性:

clear 要素の周囲にフローティング要素を許可しないことを指定します (クリアフローティング)。

左
右
##inherit
float ボックス (要素) をフローティングできるかどうかを指定します。

#左

右
##なし

<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のFloating属性値とは何ですか" >
<img  class="thumbnail" src="/images/klematis2_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSSのFloating属性値とは何ですか" >
<img  class="thumbnail" src="/images/klematis3_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSSのFloating属性値とは何ですか" >
<img  class="thumbnail" src="/images/klematis4_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSSのFloating属性値とは何ですか" >
<img  class="thumbnail" src="/images/klematis_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSSのFloating属性値とは何ですか" >
<img  class="thumbnail" src="/images/klematis2_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSSのFloating属性値とは何ですか" >
<img  class="thumbnail" src="/images/klematis3_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSSのFloating属性値とは何ですか" >
<img  class="thumbnail" src="/images/klematis4_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="CSSのFloating属性値とは何ですか" >
</body>
</html>

ログイン後にコピー

実行結果: