Elementos de layout ao lado de parágrafos específicos no texto, sem usar tabelas

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

  •  05-07-2019
  •  | 
  •  

Pergunta

Portanto, uma página da web exibe uma longa quantidade de texto em formato de parágrafo. O objetivo é colocar um elemento, como uma imagem ou um pouco de texto, próximo ao parágrafo 17 ou 26 sem alterar o parágrafo de qualquer forma (ou seja, o parágrafo não deveria ter que envolver em torno dele).

Até agora, a melhor maneira de fazer isso que eu posso ver é envolver o texto em uma tabela, uma coluna para o texto (e um parágrafo em cada linha) e um vazio que pode ser preenchido com o elemento colocado por id (o id sendo um número de linha).

Isso parece bastante desajeitado. Por um lado, se o elemento adicionado for mais longo verticalmente que o parágrafo, uma lacuna será criada no texto original. Por outro, cada parágrafo agora se parece 

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

Alguém pode pensar em uma alternativa adequada?

*** Então, com o jQuery, é fácil pegar esse id de TD e preenchê -lo com o que eu quiser.

Editar depois da resposta de Andre:

Então, eu tenho uma série de parágrafos.

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

Eu quero poder adicionar texto ou uma imagem ou algum elemento a, digamos, o terceiro parágrafo, para obter algo como:

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

Com um layout como:

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

... onde a largura é fixa

O problema que vejo com a solução de Andre é que ... na verdade, não, uma extensão vazia se encaixará bem, terá um ID associado ao parágrafo ao qual está ligado para que possa ser preenchido conforme necessário, e cada parágrafo pode limpar.

E não deve haver lacunas entre [P] quando [img] é mais alto.

Vou testá -lo e depois conceder a resposta, eu acho.

Foi útil?

Solução

Bem, sua milhagem pode variar com diferentes navegadores e quão bem eles lidam com flutuação e limpa, mas isso funcionou bastante bem com o 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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top