Comment placer des images côte à côte dans un Site (Créer un compte)

Non, c’était un exemple si la page avait pour id 10000 ce qui n’est pas le cas.  Mais comme je ne connais pas encore les pages où vous voulez que le code s’applique, je ne peux pas être plus précis. Donc le mieux à faire est de créer vos pages sans vous occuper du code, de me donner l’adresse de ces pages pour que je puisse voir leur identité et je vous donnerai alors les codes correspondants.

Adresse pour essai multiple: https://raphael-toussaint.com/image-cote-a-cote/ son identité est: 8867 sauf erreur.

Ce n’est pas un bon exemple; je vous explique pourquoi. En pièce jointe, vous avez les schémas de la structure des pages « vidéos de Laurent Guiller » et « image côte à côte ». Comme on peut s’y attendre, elles ont la même structure de base: En dessous de l’image d’en-tête successivement   -> un titre (.header-post-title-container)  -> une section (.entry-content.clearfix) contenant divers éléments.

Dans la première page « .entry-content.clearfix » contient une série de paragraphes (les titres dates) entre lesquels vous avez des séries d’images. Le dernier code jQuery se traduit de la manière suivante:

1. var a = $(‘#post-8597 .entry-content.clearfix p’); signifie:  var a représente les paragraphes (p) contenus dans la section « .entry-content.clearfix  » de la page #post-8597.
2. for (i=0; i<a.length; i++); signifie:  pour tous les paragraphes tels que définis ci-dessus
3. $($(a)[i]).nextUntil ($(a)[i+1]).wrapAll; signifie: grouper tout ce qui se trouve entre deux paragraphes successifs (les séries d’images)
4. <p class = ‘nouvelle’></p> »); signifie: en un nouveau paragraphe qui s’appellera « nouvelle ».

En clair, on sélectionne les images entre deux paragraphes et on les regroupe en un seul paragraphe que l’on appelle « nouvelle ». Il y aura bien sûr autant de paragraphes « nouvelle’ que de séries d’images

Je code CSS signifie: pour chaque nouveau paragraphe « nouvelle »  appliquer la règle « inline-flex » (mettre les images à l’horizontale)

Dans la deuxième page il n’y a plus de paragraphes (les titres dates) dans la section  « .entry-content.clearfixs » seulement une série d’images. Le code jQuery ne peut donc pas s’appliquer. Vous n’avez plus besoin de regrouper les figures en un paragraphe « nouvelle » (vous pourriez le faire mais ce serait inutile). Il suffit donc de mettre toutes les images à l’horizontale  avec le code:

#post-8867 .entry-content.clearfix{
  	display: inline-flex;
 	flex-flow: row wrap;
	gap:10px;	
}

Pour conclure. Si votre page « image côte à côte » reste telle qu’elle est ou si vous vous contentez d’ajouter des images, vous avez seulement besoin du code CSS ci-dessus. Si vous introduisez des titres dates, vous aurez besoin du code CSS + le code jQuery. J’espère avoir bien expliqué.

Bonjour,

Toujours matinal; je ne peux pas dire la même chose de moi.

Donc en pièce jointe l’explication de ce que vous constatez.

1. avec ce code CSS seul:

   #post-8867 .entry-content.clearfix{
     	display: inline-flex;
    	flex-flow: row wrap;
   	gap:10px;	
   }

   Tout ce qui est dans « .entry-content.clearfix  » est placé à l’horizontale; cela comprend les images et les deux paragraphes titres.  Vous constatez que les images sont sur deux lignes. Cela vient de se morceau de code « flex-flow: row wrap; »dans le code CSS. Cela équivaut à « passer à la ligne suivante ».  Quand la largeur totale du contenu placé à l’horizontale excède la largeur de la page, on continue en dessous. Ici, la largeur des deux titres + celle de 4 images sont le maximum autorisé; les deux images restantes se placent automatiquement sur la ligne suivante . Sans « flex-flow: row wrap; » tout serait sur une même ligne et sortirait éventuellement du cadre de la page.

2. En appliquant le code jQuery, on crée une nouvelle section (« .nouvelle ») incluant les images mais excluant les deux paragraphes titres. Ce code CSS:

   #post-8867 .nouvelle{
     	display: inline-flex;
    	flex-flow: row wrap;
   	gap:10px;	
   }

   va maintenant placer le contenu de « .nouvelle » (les images et elles seules à l’horizontale. Vous ajoutez simplement ce code CSS dans les CSS personnalisées (et vous gardez bien sûr celui de la page 8797).

Pour le code jQuery, vous remplacez le code utilisé en dernier par le suivant, qui s’applique aux deux pages.

<script>
$= jQuery;
var  a = $('#post-8797.entry-content.clearfix p'); 
    for (i=0; i<a.length; i++){
    $($(a)[i]).nextUntil ($(a)[i+1]).wrapAll("<p class = 'nouvelle'></p>");
  }
var b = $('#post-8867 .entry-content.clearfix p'); 
    for (i=0; i<b.length; i++){
    $($(b)[i]).nextUntil ($(b)[i+1]).wrapAll("<p class = 'nouvelle'></p>");
  }
</script>

• Cette réponse a été modifiée le il y a 9 mois et 1 semaine par ferman.