为什么浮动能实现文字环绕图片而不会重叠
今天看图解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>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
HTML, CSS et jQuery : Créez un bouton avec un effet flottant
Oct 24, 2023 pm 12:09 PM
HTML, CSS et jQuery : Créer un bouton avec un effet flottant nécessite des exemples de code spécifiques Introduction : De nos jours, la conception Web est devenue une forme d'art En utilisant des technologies telles que HTML, CSS et JavaScript, nous sommes en mesure d'ajouter divers aspects à la page. . De tels effets spéciaux et effets interactifs. Cet article présentera brièvement comment utiliser HTML, CSS et jQuery pour créer un bouton avec un effet flottant et fournira des exemples de code spécifiques. 1. Structure HTML Tout d'abord, nous devons
Existe-t-il un moyen d'effacer les flotteurs ?
Feb 22, 2024 pm 04:00 PM
Existe-t-il une méthode pour effacer les flottants ? Des exemples de code spécifiques sont requis. Dans la mise en page Web, les flottants sont une méthode de mise en page courante qui permet aux éléments de se détacher du flux de documents et d'être positionnés par rapport aux autres éléments. Cependant, un problème souvent rencontré lors de l'utilisation d'une mise en page flottante est que l'élément parent ne peut pas envelopper correctement l'élément flottant, ce qui entraîne une mise en page désordonnée de la page. Par conséquent, nous devons prendre des mesures pour effacer le flotteur afin que l'élément parent puisse envelopper correctement l'élément flottant. Il existe de nombreuses façons d'effacer les flottants. Ce qui suit présente plusieurs méthodes couramment utilisées et donne des exemples de code spécifiques.
Conseils de mise en page HTML : Comment utiliser l'attribut position pour le contrôle des éléments flottants
Oct 21, 2023 am 09:22 AM
Compétences en mise en page HTML : Comment utiliser l'attribut position pour contrôler les éléments flottants Dans la conception Web, la mise en page est un élément très important. Grâce à une mise en page raisonnable, les pages Web peuvent être rendues plus belles et plus faciles à lire, et l'expérience utilisateur peut être améliorée. Dans le processus de mise en œuvre de la mise en page, le contrôle des éléments flottants est l'un des points clés. HTML fournit l'attribut position, grâce auquel nous pouvons contrôler les éléments flottants. Cet article explique comment utiliser l'attribut position pour disposer des éléments flottants et fournit du code spécifique.
Guide des propriétés des images CSS : contour et affichage
Oct 25, 2023 am 08:57 AM
Guide des propriétés des images CSS : outline et displayCSS font partie intégrante du développement front-end, et les propriétés des images sont également essentielles. Dans cet article, nous nous concentrerons sur deux concepts importants concernant les propriétés de l'image : le contour et l'affichage. Cet article détaillera leur définition, leur utilisation et des exemples de code spécifiques. Présentation de l'attribut outline : L'attribut outline est utilisé pour créer un contour autour d'un élément sans occuper d'espace de mise en page. c'est
Flotteurs CSS et flotteurs transparents : maîtriser les flotteurs et les flotteurs transparents
Nov 18, 2023 am 10:56 AM
Flotteurs CSS flottants et de compensation : Maîtriser les compétences des flotteurs flottants et de compensation nécessite des exemples de code spécifiques dans la conception et le développement Web, les flotteurs CSS (float) sont l'une des techniques de mise en page courantes. Vous pouvez utiliser float pour déplacer des éléments vers la gauche ou la droite afin d'ajuster la position et la disposition des éléments sur la page. Cependant, les éléments flottants peuvent également causer certains problèmes sur la page, comme la hauteur de l'élément parent qui s'effondre, etc. Par conséquent, il est très important de maîtriser les compétences nécessaires pour utiliser les flotteurs et les nettoyer. Cet article se concentrera sur les techniques de flottement et de compensation CSS et fournira des informations spécifiques.
Liste complète des propriétés de mise en page CSS : affichage, position et float
Oct 20, 2023 pm 05:36 PM
Liste complète des propriétés de mise en page CSS : affichage, position et float CSS est un langage de balisage utilisé pour contrôler le style des pages Web. Les propriétés de mise en page sont très importantes lors de la conception de la mise en page d'une page Web. CSS fournit une variété de propriétés de mise en page, dont les plus couramment utilisées sont l'affichage, la position et le flotteur. Dans cet article, nous présenterons en détail ces trois propriétés de mise en page et fournirons des exemples de code spécifiques. Attribut d'affichage L'attribut d'affichage est utilisé pour spécifier l'élément
Discutez des raisons pour lesquelles le positionnement fixe ne peut pas être utilisé en HTML
Jan 20, 2024 am 10:15 AM
Discussion sur le problème de l'impossibilité d'utiliser le positionnement fixe en HTML Avec le développement rapide d'Internet, la conception Web est devenue de plus en plus complexe et diversifiée. Dans la conception Web, il est souvent nécessaire d'utiliser un positionnement fixe (position:fixed) pour contrôler la position des éléments afin que la page puisse obtenir des effets spéciaux. Cependant, dans certains cas, le positionnement fixe ne peut pas être utilisé en HTML, ce qui cause de nombreux maux de tête aux concepteurs. Cet article explorera l'impossibilité d'utiliser le positionnement fixe en HTML et fournira des exemples de code spécifiques. 1. Éléments flottants
Conseils d'optimisation des propriétés du menu déroulant CSS : position et z-index
Oct 20, 2023 pm 12:02 PM
Conseils d'optimisation des attributs du menu déroulant CSS : position et z-index Dans la conception Web, le menu déroulant est l'un des éléments interactifs courants. Grâce au menu déroulant, les utilisateurs peuvent facilement sélectionner les options requises, améliorant ainsi l'expérience utilisateur. Cependant, lorsqu'il existe plusieurs menus déroulants sur la page, leur positionnement et leur relation en cascade peuvent poser des problèmes. Afin de résoudre ces problèmes, nous pouvons optimiser l'effet d'affichage du menu déroulant en utilisant l'attribut position et l'attribut z-index en CSS.
