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

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

藏色散人

Freigeben： 2018-08-10 14:19:43

Original

6088 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!