Elementos de diseño junto a párrafos particulares en el texto, sin usar tablas

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

  •  05-07-2019
  •  | 
  •  

Pregunta

Por lo tanto, una página web muestra una gran cantidad de texto en formato de párrafo. El objetivo es colocar un elemento, como una imagen o un fragmento de texto, junto a los párrafos 17 o 26 sin cambiar el párrafo de ninguna manera (es decir, el párrafo no debe tener que ajustarse alrededor de él).

Hasta ahora, la mejor manera de hacer esto que puedo ver es envolver el texto en una tabla, una columna para el texto (y un párrafo en cada fila) y un vacío que se puede llenar con el elemento colocado por ID (La ID es un número de fila).

Esto parece bastante torpe. Por un lado, si el elemento agregado es más largo verticalmente que el párrafo, se creará un espacio en el texto original. Por otro lado, cada párrafo ahora se ve como 

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

¿Alguien puede pensar en una alternativa adecuada?

*** Luego, con jQuery es fácil tomar esa ID de td y rellenarla con lo que quiera.

EDITAR después de la respuesta de Andre:

Tengo una serie de párrafos. 

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

Quiero poder agregar texto o una imagen o algún elemento a, digamos, el tercer párrafo, para obtener algo como: 

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

Con un diseño como: 

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

... donde el ancho es fijo

El problema que veo con la solución de Andre es que ... en realidad, no, un espacio vacío encajará bien, tiene una identificación asociada con el párrafo al que está vinculado para que se pueda completar según sea necesario, y cada párrafo puede claro.

Y no debería haber espacios entre [p] cuando [img] es más alto.

Voy a probarlo y luego otorgaré la respuesta, creo.

¿Fue útil?

Solución

Bueno, su millaje puede variar con diferentes navegadores y qué tan bien manejan flotar y despejar, pero esto funcionó bastante bien con IE 7, Google Chrome y 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top