Heim > Artikel > Web-Frontend > Wie verwende ich CSS-Attribute, um das benutzerdefinierte Schweben von Bildern auf der Seite zu steuern? (Beispiel)

Wie verwende ich CSS-Attribute, um das benutzerdefinierte Schweben von Bildern auf der Seite zu steuern? (Beispiel)

藏色散人Original: 2018-08-10 14:19:436084Durchsuche

Wenn Anfänger Webseiten entwerfen, haben sie gelegentlich Probleme mit dem Problem schwebender Bilder und wissen nicht, wo sie anfangen sollen. Dieser Artikel führt Sie hauptsächlich in die relevanten Kenntnisse des CSS-Floating ein. Ich hoffe, dass er für Freunde in Not hilfreich ist. Zunächst müssen Sie Float verstehen, ein wichtiges Attribut in CSS.

Das Float-Attribut definiert, in welche Richtung das Element schwebt. In der Vergangenheit wurde diese Eigenschaft immer auf Bilder angewendet, wodurch der Text um das Bild herum umbrochen wurde. In CSS kann jedoch jedes Element schwebend dargestellt werden. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig davon, um welchen Elementtyp es sich handelt. Wenn nicht ersetzte Elemente schwebend sind, wird eine explizite Breite angegeben; andernfalls werden sie so schmal wie möglich gemacht.

Das spezifische Codebeispiel für das schwebende CSS-Bild (nach links) lautet wie folgt:

<!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="Wie verwende ich CSS-Attribute, um das benutzerdefinierte Schweben von Bildern auf der Seite zu steuern? (Beispiel)" >
    php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修
    改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
    php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线
    修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
</body>
</html>

Der Testeffekt des obigen Codes ist wie folgt:

Wie verwende ich CSS-Attribute, um das benutzerdefinierte Schweben von Bildern auf der Seite zu steuern? (Beispiel)

Das spezifische Codebeispiel für das schwebende CSS-Bild (rechts) lautet wie folgt:

<!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="Wie verwende ich CSS-Attribute, um das benutzerdefinierte Schweben von Bildern auf der Seite zu steuern? (Beispiel)" >
    php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修
    改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
    php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线
    修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。
</body>
</html>

Hinweis: Alle gängigen Browser unterstützen das Float-Attribut. Der Attributwert „inherit“ wird in keiner Version von Internet Explorer (einschließlich IE8) unterstützt.

Wenn in einer Zeile nur sehr wenig Platz für ein schwebendes Element vorhanden ist, springt das Element zur nächsten Zeile und dieser Vorgang wird fortgesetzt, bis eine bestimmte Zeile genügend Platz hat.

Fasst die möglichen Werte von float zusammen:

left Das Element schwebt nach links.

right Das Element schwebt nach rechts.

keine Standardwert. Das Element ist nicht schwebend und erscheint dort, wo es im Text erscheint.

inherit gibt an, dass der Wert des Float-Attributs vom übergeordneten Element geerbt werden soll.

In diesem Artikel wird das Problem vorgestellt, wie man Bilder mit CSS schweben lässt. Ich hoffe, dass er hilfreich und als Referenz verfügbar ist.

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS-Attribute, um das benutzerdefinierte Schweben von Bildern auf der Seite zu steuern? (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css Float 继承

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?Nächster Artikel：Wie fügt man dem Bild mit CSS einen Randeffekt hinzu, wenn die Maus über das Bild bewegt wird?

In Verbindung stehende Artikel

Mehr sehen