CSS: Intersperse des images au paragraphe

J'ai un nombre variable de paragraphes, et je veux intercaler des images entre eux. Je ne peux pas les intercaler dans le code lui-même. Les paragraphes me sont donnés en bloc.CSS: Intersperse des images au paragraphe

J'ai créé un jsfiddle ici: http://jsfiddle.net/4VvVL/1/, mais je ne suis pas sûr de la façon de le faire. Je ne peux pas faire:

<img> 
<p>...</p><p>...</p> 
<img> 
<p>...</p><p>...</p> 
<img> 
<p>...</p><p>...</p>

mais doit garder les paragraphes dans un bloc:

<img><img><img> 
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>

Toute pensée? Je peux le faire en code (js, ou autre), mais je me demande s'il existe une solution CSS.

Source

2011-11-28 ash

donc, fondamentalement, vous devez conserver les images dans une partie et les paragraphes sur l'autre – Starx

Si je comprends votre question, vous souhaitez faire apparaître les images dans le texte, sans modifier l'ordre du HTML. Si c'est le cas, je ne pense pas que cela soit possible sans javascript ou jQuery. –

@RoryMcCrossan: exactement. – ash

Si vous ne vous souciez pas du fait que ce sont vraiment des tags img, et que vous ne vous souciez pas des anciens navigateurs, alors cela peut être fait. Voir http://jsfiddle.net/4VvVL/10/ et http://jsfiddle.net/4VvVL/9/. Si cela est pratique sur javascript peut être discutable, mais c'est à vous de décider. L'idée est d'utiliser l'élément pseudo :before pour créer un emplacement pour une image d'arrière-plan à afficher, puis d'utiliser :first-child comme base pour «compter» avec le sélecteur de frère adjacent. Pour les navigateurs qui le supportent, le sélecteur :nth-child est encore meilleur. Voir http://jsfiddle.net/4VvVL/11/.

Source

2011-11-28 14:18:51 ScottS

+1 pour une bonne réponse au problème d'OP, mais je recommande de ne pas utiliser cette méthode personnellement en raison des limitations de compatibilité du navigateur. –

C'est pourquoi je lui ai laissé l'utilisation «pratique». La situation et les besoins de chacun sont différents. Je voulais juste montrer que cela pouvait être fait par CSS seulement. Merci pour le vote. – ScottS

Très cool; la solution ne va pas mieux que ça. Je vais devoir revenir au code puisque je ne peux pas encore le supporter. Merci! – ash

CSS: Intersperse des images au paragraphe

Répondre

Questions connexes