Éléments de mise en page à côté de paragraphes particuliers dans le texte, sans utiliser de tableaux

StackOverflow https://stackoverflow.com/questions/1402292

  •  05-07-2019
  •  | 
  •  

Question

Ainsi, une page Web affiche une longue quantité de texte au format paragraphe. L’objectif est de placer un élément, tel qu’une image ou un bout de texte, à côté du paragraphe 17 ou 26, sans changer le paragraphe de quelque manière que ce soit (c’est-à-dire que le paragraphe ne devrait pas avoir à l’envelopper).

Jusqu'à présent, le meilleur moyen de le faire est d'encapsuler le texte dans un tableau, une colonne pour le texte (et un paragraphe sur chaque ligne) et un élément vide pouvant être rempli avec l'élément placé par ID. (l'ID étant un numéro de ligne).

Cela semble plutôt maladroit. D'une part, si l'élément ajouté est plus long verticalement que le paragraphe, un espace sera créé dans le texte d'origine. D'autre part, chaque paragraphe ressemble maintenant à 

<tr><td><p> garble fizz thoutrious</p></td><td id = "#"***></td></tr>

Quelqu'un peut-il penser à une alternative appropriée?

*** Puis avec jQuery, il est facile de saisir cet identifiant td et de le remplir avec ce que je veux.

EDIT après la réponse d’André:

J'ai donc une série de paragraphes. 

<p>Thing thing thing</p>
<p>Thang Thang Thang</p>
<p>Sing Sing Sing</p>
<p>Song Song Song</p>

Je veux pouvoir ajouter du texte, une image ou un élément au troisième paragraphe, par exemple, pour obtenir quelque chose comme: 

<p>Thing thing thing</p>
<p>Thang Thang Thang</p>
<p>Sing Sing Sing</p><img>
<p>Song Song Song</p>

Avec une mise en page du type: 

[p   ]
[p   ]
[p   ][img]
[p   ]

... où la largeur est fixée

Le problème que je vois avec la solution d’André est qu’en fait, non, une plage vide ira bien, un identifiant est associé au paragraphe auquel elle est liée pour pouvoir être rempli au besoin, et chaque paragraphe peut clair.

Et il ne devrait y avoir aucun écart entre [p] lorsque [img] est plus grand.

Je vais tester et attribuer la réponse, je pense.

Était-ce utile?

La solution

Votre kilométrage peut varier en fonction des navigateurs et de leur efficacité, mais cela fonctionne assez bien avec IE 7, Google Chrome et FireFox 3.5: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>CSS Float/Clear example</title>
  <style type="text/css">
    p.firstParagraph
    {
      width: 50%;
      float: left;
    }

    p.secondParagraph
    {
      width: 50%;
      float: left;
    }
  </style>
 </head>
 <body>
  <p class="firstParagraph">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante non massa vehicula sodales. Praesent blandit venenatis purus non mollis. Nunc consectetur urna quis eros sollicitudin rhoncus. Nulla in nulla nibh. Ut in eros erat. Donec pharetra ultricies lacus, quis tincidunt orci iaculis at. Suspendisse varius posuere diam sed feugiat. Sed eu ipsum massa, vel ultricies augue. Duis sem augue, faucibus sit amet suscipit id, ultrices nec augue. Sed vel diam quis risus venenatis congue vitae eget urna. Sed sapien nisi, hendrerit a euismod quis, iaculis eu enim. 
  </p>

  <p class="secondParagraph">
    Something else
  </p>
 </body>
</html>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top