Comment aligner du texte avec une image diagonale

Un client OSTraing a demandé un moyen d'aligner le texte à côté d'une image en diagonale, tout en gardant un espace entre les deux éléments.

Ma première pensée a été d'ajouter des lignes de rupture à des points spécifiques du texte, mais cela n'a pas fonctionné car le site était réactif.

Après avoir discuté avec le client, nous avons trouvé une solution plus élégante ...

Le cas d'utilisation

Dans cet exemple, le texte doit être aligné à gauche et l'image à droite. Le véritable défi ici est que le texte ne doit pas se superposer à l'image. Le résultat que nous voulons est affiché ci-dessous :

La solution

Nous pouvons ajouter des div vides flottant à droite avec des valeurs de largeur dynamiques pour forcer le texte à ne pas se superposer à l'image. Notez que dans cet exemple, l'image est ajoutée en arrière-plan avec CSS.

Le HTML

Le code HTML de cet exemple ressemble à ceci :

 <div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <p>A buch of dummy text goes here...</p> </div>

Vous pouvez remarquer les multiples divs vides avec la classe d' espacement . Ces éléments en combinaison avec certains CSS génèrent l'espacement entre le texte et l'image.

Le nombre de divs d'espacement est égal au nombre de lignes de texte nécessaires pour remplir la hauteur de l'image. Dans cet exemple, l'image doit être recouverte de 14 lignes.

Le CSS

Je vais diviser le CSS requis en plusieurs parties pour une meilleure explication.

 #container {  background-image: url(bg.png);  background-repeat: no-repeat;  background-position: right top;  background-size: 300px auto;  min-height: 300px; }

Définit l'image comme arrière-plan avec une position et une taille spécifiques.

 #container p {  line-height: 22px;  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 14px; }

Le sélecteur #container p fait référence au texte. Il est très important de définir la taille de la police et la hauteur de la ligne pour calculer ultérieurement les valeurs des autres propriétés.

 .spacing {  float: right;  clear: right;  height: 22px; }

Cette propriété indique aux divs vides de flotter à droite. Notez que la valeur de hauteur est la même que celle que nous utilisons pour la hauteur de ligne dans les paragraphes.

 .spacing:nth-child(1) {  width: 305px; } .spacing:nth-child(2) {  width: 283px; } .spacing:nth-child(3) {  width: 261px; } .spacing:nth-child(4) {  width: 239px; } .spacing:nth-child(5) {  width: 217px; } .spacing:nth-child(6) {  width: 195px; } .spacing:nth-child(7) {  width: 173px; } .spacing:nth-child(8) {  width: 151px; } .spacing:nth-child(9) {  width: 129px; } .spacing:nth-child(10) {  width: 107px; } .spacing:nth-child(11) {  width: 85px; } .spacing:nth-child(12) {  width: 63px; } .spacing:nth-child(13) {  width: 41px; } .spacing:nth-child(14) {  width: 19px; }

Le code ci-dessus est la partie amusante qui peut nécessiter l'utilisation d'une calculatrice.

La valeur de largeur choisie pour .spacing:nth-child(1) s'appliquera à la première div avec la classe d'espacement, de la même manière .spacing:nth-child(2) définit une largeur légèrement plus petite et ainsi de suite jusqu'à ce qu'il atteigne l'élément d' espacement numéro 14.

La raison de définir des valeurs dynamiques de haut en bas pour chaque div vide à droite permet de garder le texte aligné à gauche sans superposer l'image.

Cela étant dit, comment pouvons-nous calculer la largeur de chacune de ces divs vides ? La réponse nécessite une petite formule basée sur les valeurs de :

• hauteur de ligne pour le texte (22px dans mon exemple)
• background-size (300px dans cet exemple)

La largeur de la première div vide est de 305 pixels, ce qui correspond à la valeur de la largeur de l'arrière-plan définie plus 5 pixels supplémentaires que j'ai décidé d'inclure pour éviter que le texte ne soit trop proche du bord de l'image.

Assistance réactive

En utilisant l'exemple de code, la conception fonctionnera correctement dans n'importe quelle taille d'écran. Jetez un œil à la démo et redimensionnez le navigateur pour le voir en action.

Voir une démo

Bonus : MOINS

Une alternative à aller directement au CSS est LESS. Nous avons un tutoriel si vous êtes nouveau sur LESS.

Vous pouvez générer le même résultat en utilisant LESS pour créer dynamiquement les multiples valeurs de largeur pour chaque div avec une classe d' espacement facilement sans vous soucier des mathématiques.

 @textHeight: 22px; @backgroundWidth: 300px; @extraSpacing: 5px; @initialWidth: @backgroundWidth + @extraSpacing; @textLines: @backgroundWidth / @textHeight;

Décidez de la hauteur du texte et de la largeur d'arrière-plan à l'aide des variables.

 #container {    background-image: url(bg.png);    background-repeat: no-repeat;    background-position: right top;    background-size: @backgroundWidth auto;    min-height: @backgroundWidth; }

Les propriétés du conteneur.

 #container p {    line-height: @textHeight;    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;    font-size: @textHeight - 8; } .spacing {    float: right;    clear: right;    height: @textHeight; }

Les propriétés de texte et d'espacement sont calculées dynamiquement en fonction de certaines variables.

 .generate-spacing(@i, @end) when (@i <= @end) {    .spacing:nth-child(@{i}) {        width: @initialWidth - ((@i - 1) * @textHeight);    }    .generate-spacing((@i + 1), @end); } .generate-spacing(1, @textLines);

La boucle qui génère la largeur dynamique pour toutes les divs vides.

Testez ce code dans Codepen