为什么浮动能实现文字环绕图片而不会重叠
今天看图解CSS的章节，虽然主要讲的是nth-of-type选择器的使用，但是本人却关注到了页面的排版方式，如下：
HTML
<body>
<p class="article">
<img src="http://img.ujian.cc/nice/35.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<img src="http://img.ujian.cc/nice/36.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<img src="http://img.ujian.cc/nice/38.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</p>
</body>CSS
<style type="text/css">.article {width: 500px;margin: 20px auto;}.article img:nth-of-type(odd){float: left;margin-right: 10px;}.article img:nth-of-type(even){float: right;margin-left: 10px;}</style>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
HTML, CSS und jQuery: Erstellen Sie eine Schaltfläche mit schwebendem Effekt
Oct 24, 2023 pm 12:09 PM
HTML, CSS und jQuery: Für die Erstellung einer Schaltfläche mit schwebendem Effekt sind spezifische Codebeispiele erforderlich. Einführung: Heutzutage ist Webdesign zu einer Kunstform geworden. Durch den Einsatz von Technologien wie HTML, CSS und JavaScript können wir der Seite verschiedene Aspekte hinzufügen . Solche Spezialeffekte und interaktiven Effekte. In diesem Artikel wird kurz erläutert, wie Sie mithilfe von HTML, CSS und jQuery eine Schaltfläche mit schwebendem Effekt erstellen, und es werden spezifische Codebeispiele bereitgestellt. 1. HTML-Struktur Zuerst müssen wir
Gibt es eine Möglichkeit, Floats zu löschen?
Feb 22, 2024 pm 04:00 PM
Gibt es eine Methode zum Löschen von Floats? Im Webseitenlayout sind Floats eine gängige Layoutmethode, die es ermöglicht, Elemente aus dem Dokumentfluss zu lösen und relativ zu anderen Elementen zu positionieren. Bei der Verwendung des Floating-Layouts tritt jedoch häufig das Problem auf, dass das übergeordnete Element das Floating-Element nicht korrekt umschließen kann, was zu einem ungeordneten Layout der Seite führt. Daher müssen wir Maßnahmen ergreifen, um den Float zu löschen, damit das übergeordnete Element das Float-Element korrekt umschließen kann. Es gibt viele Möglichkeiten, Floats zu löschen. Im Folgenden werden einige häufig verwendete Methoden vorgestellt und spezifische Codebeispiele gegeben.
HTML-Layout-Tipps: So verwenden Sie das Positionsattribut für die Steuerung schwebender Elemente
Oct 21, 2023 am 09:22 AM
HTML-Layout-Kenntnisse: Verwendung des Positionsattributs zur Steuerung schwebender Elemente Im Webdesign ist das Layout ein sehr wichtiger Teil. Durch ein angemessenes Layout können Webseiten schöner und leichter lesbar gestaltet und die Benutzererfahrung verbessert werden. Bei der Implementierung des Layouts ist die Steuerung schwebender Elemente einer der Schlüsselpunkte. HTML stellt das Positionsattribut bereit, über das wir schwebende Elemente steuern können. In diesem Artikel wird erläutert, wie das Positionsattribut zum Layouten schwebender Elemente verwendet wird, und es wird spezifischer Code bereitgestellt
Leitfaden zu CSS-Bildeigenschaften: Umriss und Anzeige
Oct 25, 2023 am 08:57 AM
Leitfaden zu CSS-Bildeigenschaften: Outline und DisplayCSS sind ein wesentlicher Bestandteil der Frontend-Entwicklung, und Bildeigenschaften sind ebenfalls unerlässlich. In diesem Artikel konzentrieren wir uns auf zwei wichtige Konzepte zu Bildeigenschaften: Umriss und Anzeige. In diesem Artikel werden ihre Definition, Verwendung und spezifische Codebeispiele detailliert beschrieben. Überblick über das Umrissattribut: Das Umrissattribut wird verwendet, um einen Umriss um ein Element zu erstellen, ohne Platz im Layout zu beanspruchen. es ist
CSS Floats und Clear Floats: Floats und Clear Floats beherrschen
Nov 18, 2023 am 10:56 AM
CSS-Floating und Clearing-Floats: Um die Fähigkeiten des Floatings und Clearing-Floats zu beherrschen, sind spezifische Codebeispiele erforderlich. Im Webdesign und in der Entwicklung sind CSS-Floats (Float) eine der gängigen Layouttechniken. Mit Float können Sie Elemente nach links oder rechts verschieben, um die Elemente auf der Seite anzupassen und anzuordnen. Allerdings können schwebende Elemente auch einige Probleme auf der Seite verursachen, z. B. das Zusammenklappen der Höhe des übergeordneten Elements usw. Daher ist es sehr wichtig, die Fähigkeiten im Umgang mit Schwimmern und deren Beseitigung zu beherrschen. Dieser Artikel konzentriert sich auf CSS-Floating- und Clearing-Techniken und bietet spezifische Informationen
Umfassende Liste von CSS-Layout-Eigenschaften: Anzeige, Position und Float
Oct 20, 2023 pm 05:36 PM
Vollständige Liste der CSS-Layouteigenschaften: Anzeige, Position und Float. CSS ist eine Auszeichnungssprache, die zur Steuerung des Stils von Webseiten verwendet wird. Layouteigenschaften sind beim Entwerfen des Webseitenlayouts sehr wichtig. CSS bietet eine Vielzahl von Layouteigenschaften, die am häufigsten verwendeten sind Anzeige, Position und Float. In diesem Artikel stellen wir diese drei Layouteigenschaften im Detail vor und stellen spezifische Codebeispiele bereit. Anzeigeattribut Das Anzeigeattribut wird zur Angabe des Elements verwendet
Besprechen Sie die Gründe, warum eine feste Positionierung in HTML nicht verwendet werden kann
Jan 20, 2024 am 10:15 AM
Diskussion zum Problem der Unfähigkeit, feste Positionierungen in HTML zu verwenden. Mit der rasanten Entwicklung des Internets ist Webdesign immer komplexer und vielfältiger geworden. Im Webdesign ist es oft notwendig, eine feste Positionierung (position:fixed) zu verwenden, um die Position von Elementen zu steuern, damit die Seite einige besondere Effekte erzielen kann. Allerdings kann in manchen Fällen die feste Positionierung in HTML nicht verwendet werden, was den Designern viel Kopfzerbrechen bereitet. In diesem Artikel wird die Unmöglichkeit der Verwendung einer festen Positionierung in HTML untersucht und spezifische Codebeispiele bereitgestellt. 1. Schwebende Elemente
Tipps zur Optimierung von CSS-Dropdown-Menüeigenschaften: Position und Z-Index
Oct 20, 2023 pm 12:02 PM
Tipps zur Optimierung von CSS-Dropdown-Menüattributen: Position und Z-Index Im Webdesign ist das Dropdown-Menü eines der häufigsten interaktiven Elemente. Über das Dropdown-Menü können Benutzer einfach die erforderlichen Optionen auswählen und so die Benutzererfahrung verbessern. Wenn jedoch mehrere Dropdown-Menüs auf der Seite vorhanden sind, kann deren Positionierung und kaskadierende Beziehung zu Problemen führen. Um diese Probleme zu lösen, können wir den Anzeigeeffekt des Dropdown-Menüs optimieren, indem wir das Positionsattribut und das Z-Index-Attribut in CSS verwenden.
