ATTENTION: Penser à agrandir la fenêtre "édition d'un article" de la largeur réelle de l'article à l'écran , car le rendu de la mise en page dépend de la largeur des lignes ( exemple: deux images de 400px ne tiendront pas sur une même ligne inférieure à 800px, donc en visualisant dans une petite fenêtre de moins de 800px de large, vous risquez de faire une mise en page qui bougera forcément une fois sur un article de 900px de large)

     Photo téléchargée  sans alignement , curseur sur ligne au dessus du premier   paragraphe en bleu roi barré

    puis  alignée à gauche --> le premier paragraphe de texte vient  se placer alors  à droite de  la photo.

[[dans l'éditeur d'article, on peut par la suite, déplacer le texte

      aligné à droite, à gauche ou centré, paragraphe barré ci dessous aligné à gauche]]
Une des possibilités de manipulation des positionnements est par exemple celle de changer les types des éléments. La propriété CSS pour modifier les types des éléments est display (='affiche').

Photo téléchargée sans alignement avec curseur au dessus du deuxième paragraphe

de texte

Puis photo alignée à droite dans éditeur d'article.

le texte deuxième paragraphe est, lui, demandé centré

 Pour changer un élément de type block en inline il suffit de mettre Comme on est partisan du surréalisme, cherchons toujours l'extraordinaire avec le CSS. Appliquons maintenant la propriété display à ces mêmes titres pour voir ce que ça donne quand on change de type. On a juste à rajouter display : inline à la balise p. Et on aura les 3 paragraphes vert rouge jaune sur la même ligne Le flux désigne l'ordre d'affichage par défaut des éléments.

Image insérée demandé centrée

 Image insérée en minuature demandée et curseur entre deux mots d'un paragraphe

Par défaut, le navigateur affiche les éléments selon leur ordre d'apparition dans le code source. Une des propriétés remarquables d'une balise de type inline c'est le fait de ne pas créer un retour à la ligne. Par conséquent, les éléments du type inline s'affichent par défaut les uns à la suite des autres sur la même ligne. D'où leur désignation en anglais : inline qui signifie en ligne.

Images insérées sans alignement et déplacée avec le curseur dans l'éditeur d'article 

.article_text img {

outline: 5px solid green; outline-offset: -5px;

/*border: 4px solid white;*/} 

 Pour petit randonneur, j'ai ajouter margin: 15px et ça écarte le texte des des bords des images