Comment aligner à droite une partie de paragraphe

La question m’est souvent posée… comment aligner différemment deux parties d’un paragraphe

Pour réaliser ceci par exemple :

blabla à gauche du Pblabla à droitedu P

La solution est bien sur dans le css… il s’agit de donner un span « flottant » à droite au texte de droite, mais surtout de lui imposer un affichage de type bloc ET en ligne à la fois, puis de rétablir le float normal ensuite.
Comme ceci :

<p>blabla à gauche du P
<span style="display: inline-block; float:right;">blabla à droitedu P</span>
<span style="clear:both;"></span></p>

Ou plus élégamment en séparant le css du contenu :

<p>blabla à gauche du P
<span class="portionDroite">blabla à droitedu P</span>
<span class="restore"></span></p>

Avec le style des classes :

.portionDroite {display: inline-block; float:right;}
.restore {clear:both;}

Posted in XHTML / HTML / CSS | Comments (0)

No comments yet

Leave a Reply

*

 
#JeSuisCharlie