Eléments de mise en page à côté de paragraphes particuliers dans le texte, sans utiliser les tables

Ainsi, une page Web affiche une grande quantité de texte au format de paragraphe. Le but est de placer un élément, tel qu'une image ou un bout de texte, à côté du paragraphe 17 ou 26 sans modifier le paragraphe de quelque façon que ce soit (c'est-à-dire que le paragraphe ne devrait pas être enroulé). Jusqu'à présent, la meilleure façon de faire cela est de placer le texte dans un tableau, une colonne pour le texte (et un paragraphe sur chaque ligne), et un vide qui peut être rempli avec l'élément placé. ID (l'identifiant étant un numéro de ligne).Eléments de mise en page à côté de paragraphes particuliers dans le texte, sans utiliser les tables

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. Pour un autre, 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 ce td id et de le remplir avec tout 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 être en mesure d'ajouter du texte ou une image ou d'un élément, disons, troisième alinéa, 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 comme:

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

Le problème que je vois avec la solution d'André est que ... en fait, non, un em pty span conviendra parfaitement, avec un identifiant associé au paragraphe auquel il est lié afin qu'il puisse être rempli au besoin, et chaque paragraphe peut être effacé.

Il ne doit pas y avoir d'espace entre [p] lorsque [img] est plus grand. Je vais tester et ensuite attribuer la réponse je pense.

Source

2009-09-09 Anonymous

mise en page doit être fait avec CSS . – SingleShot

@SingleShot Peut-être que j'ai mal utilisé le terme mise en page. Peut-être que c'est une question de design à la place. Comment dois-je concevoir le html, structurellement, pour accomplir ce que je veux avec une mise en page CSS? Et vu que l'affichage de ces éléments est dynamique, comment dois-je concevoir le html, structurellement, pour permettre au javascript d'interagir précisément au niveau du paragraphe? La brusquerie de votre commentaire m'a forcé à clarifier ma pensée, mais j'aimerais voir des idées plus utiles. –

Eh bien, votre kilométrage peut varier avec les différents navigateurs et la façon dont ils gèrent flottée, mais cela a fonctionné 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>

Source

2009-09-09 23:17:33

Hmm. Cela pourrait fonctionner, même si ce n'est pas tout à fait ce que je voulais dire. Je réajuste la question pour la rendre plus claire. –

Considérant votre ajustement: parfois, une table est la bonne façon de procéder. L'approche que j'ai donnée ici fonctionne, jusqu'à ce que ça ne marche pas ... et puis ça devient une épreuve atroce de bidouille et de test jusqu'à ce que vous «pensiez» que cela ressemble à ce que vous vouliez sur tous les navigateurs que vous ciblez. Parfois, la simplicité est la meilleure. –

Eléments de mise en page à côté de paragraphes particuliers dans le texte, sans utiliser les tables

Répondre

Questions connexes