Elementi di layout accanto a particolari paragrafi nel testo, senza utilizzare le tabelle

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

  •  05-07-2019
  •  | 
  •  

Domanda

Quindi una pagina web mostra una grande quantità di testo in formato paragrafo. L'obiettivo è posizionare un elemento, ad esempio un'immagine o un po 'di testo, accanto al paragrafo 17 o 26 senza modificare il paragrafo in alcun modo (vale a dire che il paragrafo non dovrebbe avvolgerlo).

Finora il modo migliore per fare ciò che posso vedere è avvolgere il testo in una tabella, una colonna per il testo (e un paragrafo su ogni riga) e uno spazio vuoto che può essere riempito con l'elemento inserito tramite ID (l'ID è un numero di riga).

Questo sembra piuttosto goffo. Per prima cosa, se l'elemento aggiunto è più lungo verticalmente rispetto al paragrafo, verrà creato uno spazio nel testo originale. Per un altro, ogni paragrafo ora appare come 

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

Qualcuno può pensare a un'alternativa adatta?

*** Quindi con jQuery è facile afferrare quel td id e riempirlo con quello che voglio.

MODIFICA dopo la risposta di Andre:

Quindi ho una serie di paragrafi. 

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

Voglio essere in grado di aggiungere testo, un'immagine o qualche elemento al terzo paragrafo, per esempio, per ottenere qualcosa del tipo: 

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

Con un layout come: 

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

... dove la larghezza è fissa

Il problema che vedo con la soluzione di Andre è che ... in realtà, no, un intervallo vuoto si adatta bene, ha un ID associato al paragrafo a cui è associato in modo che possa essere riempito secondo necessità, e ogni paragrafo può chiaro.

E non ci dovrebbe essere alcun divario tra [p] quando [img] è più alto.

Lo testerò e assegnerò la risposta che penso.

È stato utile?

Soluzione

Bene, il tuo chilometraggio può variare con diversi browser e quanto bene gestiscono il float e il clear, ma questo ha funzionato abbastanza bene con IE 7, Google Chrome e 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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top