Heim > Artikel > Web-Frontend > Was sind die schwebenden Attributwerte in CSS?
Was sind die schwebenden Attributwerte in CSS?
- 王林Original
- 2021-02-24 16:28:355062Durchsuche
Die schwebenden Attributwerte in CSS sind: links, rechts, keine, erben. Das Float-Attribut kann ein Element nach links oder rechts verschieben und auch die umgebenden Elemente werden neu angeordnet. Es wird häufig im Bildlayout verwendet.
Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.
Einführung in das Float-Attribut:
CSS Float (Float) verschiebt das Element nach links oder rechts und die Elemente um es herum werden ebenfalls neu angeordnet. Float wird häufig für Bilder verwendet, ist aber auch beim Layout sehr nützlich.
Floating-Attribut:
clear Gibt an, dass Floating-Elemente um das Element herum nicht zulässig sind (Clear Floating).
left
right
both
none
inherit
float Gibt an, ob eine Box (Element) schweben kann.
links
rechts
keine
erben
Beispiel:
<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="Was sind die schwebenden Attributwerte in CSS?" >
<img class="thumbnail" src="/images/klematis2_small.jpg" style="max-width:90%" style="max-width:90%" alt="Was sind die schwebenden Attributwerte in CSS?" >
<img class="thumbnail" src="/images/klematis3_small.jpg" style="max-width:90%" style="max-width:90%" alt="Was sind die schwebenden Attributwerte in CSS?" >
<img class="thumbnail" src="/images/klematis4_small.jpg" style="max-width:90%" style="max-width:90%" alt="Was sind die schwebenden Attributwerte in CSS?" >
<img class="thumbnail" src="/images/klematis_small.jpg" style="max-width:90%" style="max-width:90%" alt="Was sind die schwebenden Attributwerte in CSS?" >
<img class="thumbnail" src="/images/klematis2_small.jpg" style="max-width:90%" style="max-width:90%" alt="Was sind die schwebenden Attributwerte in CSS?" >
<img class="thumbnail" src="/images/klematis3_small.jpg" style="max-width:90%" style="max-width:90%" alt="Was sind die schwebenden Attributwerte in CSS?" >
<img class="thumbnail" src="/images/klematis4_small.jpg" style="max-width:90%" style="max-width:90%" alt="Was sind die schwebenden Attributwerte in CSS?" >
</body>
</html>Laufergebnis:
Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonWas sind die schwebenden Attributwerte in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!