Flotter un élément dans le coin inférieur

Besoin de disposer un élément à droite ou à gauche, de sorte que le texte s'enroule autour? C'est une tâche facile pour la propriété Float. Mais qu'en est-il si vous voulez également pousser cet élément (appelons cela une image) à l'un des coins inférieurs pendant que nous y sommes? Cela semble un peu délicat, non? Nous avons probablement besoin de JavaScript?

Non, quelques lignes de CSS (délicate) peuvent le faire! Voici la solution CSS uniquement qui fera votre image pour s'en tenir au coin inférieur, quelle que soit la taille et le contenu.

Redimensionner l'élément wrapper et voir la magie au travail:

Disséquons le code.

Marquage et mise en page

Nous aurons besoin d'un élément de wrapper pour tout contenir, et nous utiliserons Flexbox dessus. Flexbox nous permet de compter sur l'alignement d'étirement par défaut pour pouvoir utiliser plus tard la hauteur: 100%.

 <div>
  <div>
    <div> <img  alt="Flotter un élément dans le coin inférieur" > </div>
    Lorem ipsum Dolor ...
  </div>
</div>

 .wrapper {
  Affichage: flex;
}

.flotter {
  flottant: à droite;
  hauteur: 100%;
  Affichage: flex;
  Align-Items: Flex-end;
  Forme-Out-Out: encadré (calc (100% - 100px) 0 0);
}

La boîte. Box dans le .wrapper est notre élément Flex. Nous n'avons pas besoin d'un CSS particulier appliqué à la boîte. Il définit la hauteur de l'emballage et, en même temps, est étiré à la même hauteur. Ce comportement nous donnera une «hauteur de référence» qui peut être utilisée par les éléments enfants.

À partir de la spécification:

Si l'élément Flex a un auto aligné: étirement, rétablir la disposition de son contenu, en traitant cette taille utilisée comme sa taille croisée définie afin que les enfants de pourcentage puissent être résolus.

Le mot-clé est le défini qui nous permet d'utiliser en toute sécurité un pourcentage (%) de hauteur à l'intérieur de l'élément de la boîte.

Maintenant pour l'élément flottant

Notre élément .float prendra toute la hauteur à côté du contenu du texte, grâce au calcul de hauteur que nous avons détaillé ci-dessus. À l'intérieur de cet élément, nous poussons l'image vers le bas à l'aide de l'alignement Flexbox.

Maintenant, pour la vraie ruse, en utilisant la propriété de forme-extérieur. Voici comment MDN le définit:

La propriété CSS de forme-extérieur définit une forme - qui peut être non rectangulaire - à laquelle la teneur en ligne adjacente doit s'enrouler. Par défaut, le contenu en ligne s'enroule autour de sa boîte de marge; La forme-out-out fournit un moyen de personnaliser cet emballage, ce qui permet d'envelopper du texte autour d'objets complexes plutôt que de simples boîtes.

En d'autres termes, la forme-ex-out définit la façon dont le contenu circule autour de la boîte de délimitation d'un élément.

Il faut un certain nombre de valeurs. L'un d'eux est la fonction inset () qui, encore une fois, selon MDN:

Définit un rectangle en encadré. Lorsque tous les quatre premiers arguments sont fournis, ils représentent le haut, la droite, le bas et les décalages gauche de la zone de référence vers l'intérieur qui définissent les positions des bords du rectangle d'encart.

Ainsi, avec la forme-ex-out: encadré (calc (100% - x) 0 0), nous pouvons créer un rectangle d'encart qui commence exactement en haut de l'image. Et le haut est égal à 100% - x, où x est la hauteur de l'image et 100% est la hauteur de l'élément .float. Cela permet au texte de s'envelopper dans l'espace libre en haut de l'image. Ceci est réactif , et nous pouvons facilement basculer entre la gauche et la droite (en ajustant la propriété flottante)

C'est ça! La seule mise en garde majeure est que vous devez connaître la hauteur de l'image.

Optimions le balisage

Nous pouvons toujours optimiser un peu notre code et supprimer l'emballage supplémentaire autour de l'image.

 <div>
  <div>
    <mg>
    Lorem ipsum Dolor ...
  </mg>
</div>
</div>

Ensuite, notre CSS deviendra

 .wrapper {
  Affichage: flex;
}

.flotter {
  flottant: à droite;
  hauteur: 100%;
  Largeur: 100px;
  Forme-Outside: encadré (calc (100% - 100px / * hauteur * /) 0 0);
  objet-ats: contenir;
  Position d'objets: en bas;
}

Étant donné que nous avons supprimé l'emballage supplémentaire, nous avons besoin d'une autre technique pour placer l'image dans le coin inférieur. Pour cela, nous utilisons la position d'objet et d'objet, mais nous devons spécifier explicitement la largeur de l'image.

En utilisant cette méthode, nous devons connaître la largeur et la hauteur de l'image contrairement au code précédent où seule la hauteur est nécessaire.

En voulez plus?

Nous pouvons étendre ce concept un peu plus loin pour tenir compte des situations plus sophistiquées. Par exemple, nous pouvons faire flotter l'image vers la droite, mais la brocher au milieu de la boîte avec la justifier-contenu: Centre: et a également réglé notre rectangle d'encadre au milieu en modifiant la forme-ex-gêne (calc (100% - x) 0 0) en encart (calc (50% - x / 2) 0 0)

Nous pouvons également flotter deux images aux deux coins inférieurs:

Rien de complexe ici. J'utilise simplement le même élément flottant deux fois, une fois à droite, et encore à gauche. Et pourquoi s'arrêter à deux coins lorsque nous pouvons placer des images aux quatre coins:

La même idée de base est en jeu ici, mais nous comptons également sur la fonction Float commune pour les images supérieures. Cependant, vous remarquerez que c'est là que le concept commence à décomposer un peu, et nous obtenons un débordement indésirable en fonction de la taille de la boîte de contenu. Nous pouvons faire de la hauteur de l'élément. Float supérieur à 100% et appliquer quelque peu des «nombres magiques» qui lissent les choses en ajustant le rembourrage et la marge des images.

Saviez-vous que la forme-ex-out accepte le gradient radial () comme une valeur? Nous pouvons l'utiliser pour placer des images arrondies comme ci-dessous:

La partie transparente du gradient est l'espace libre où le texte peut aller. Vous avez peut-être remarqué que nous avons également appliqué un rayon frontalier à l'image. La propriété de forme-extérieur affectera simplement l'élément .float et nous devons ajuster manuellement la forme de l'image pour suivre la forme définie par la forme-extérieur.

Pendant que nous y sommes, combinons cela avec notre exemple précédent qui épingle l'image au centre vertical de la boîte à l'aide de Justify-Contin: Centre:

Un autre gradient radial () et également une autre configuration de la radius frontalière.

Nous aurions pu utiliser un gradient linéaire () à la place pour faire une forme triangulaire pour la zone d'emballage:

C'est la même idée que nous avons utilisée pour le gradient radial (). La grande différence est que nous utilisons Clip Path au lieu de Border-Radius pour couper notre image.

Et, puisque nous l'avons fait pour les autres, utilisons la justification-contenu: idée centrale pour épingler l'image au centre vertical du bord droit de la boîte:

Nous avons utilisé un gradient conique () dans la démonstration ci-dessus avec une forme-extérieur pour définir la forme triangulaire et le chemin de clip pour obtenir une forme similaire sur l'image

Tous ces exemples peuvent toujours être optimisés en utilisant moins de code dans le cas où l'image est décorative (lorsqu'elle n'est pas nécessaire à l'intérieur du HTML à des fins de référencement). Remplacement de l'élément .float par un pseudo-élément et appliquons l'image comme arrière-plan à la place:

Nous utilisons Mask pour montrer uniquement la partie de l'image dont nous avons besoin et, devinez quoi, il utilise la même valeur que la forme-extérieur! Ainsi, tout ce que nous avions à faire est de définir une valeur pour la forme.

C'est ça!

Il y a beaucoup de possibilités ici pour placer non seulement des rectangles dans les coins, mais tout type de forme à n'importe quelle position, en utilisant largement la même structure de code. Nous avons seulement besoin de:

• Ajustez la propriété de forme-ex-out pour définir la forme
• Appliquez un peu de style à l'image pour suivre la forme précédemment définie ou appliquer la même valeur au masque au cas où nous utilisons la version pseudo

Ensuite, tout le retient, même dans des conceptions réactives.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!