Layoutelemente neben bestimmten Absätzen im Text, ohne Tabellen zu verwenden

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

  •  05-07-2019
  •  | 
  •  

Frage

Eine Webseite zeigt also eine lange Menge an Text im Absatzformat an. Das Ziel ist ein Element wie ein Bild oder ein Stück Text neben Absatz 17 oder 26, ohne den Absatz in irgendeiner Weise zu ändern (dh der Absatz sollte es nicht umwickeln müssen).

Bisher kann der beste Weg, dies zu tun, den Text in einer Tabelle, eine Spalte für den Text (und einen Absatz in jeder Zeile) und eine leere, die mit dem platzierten Element mit der ID (der ID "mit dem platzierten Element gefüllt werden kann. eine Zeilennummer sein).

Das scheint ziemlich klobig. Zum einen wird im Originaltext eine Lücke erstellt, wenn das hinzugefügte Element vertikal länger als der Absatz ist. Zum anderen sieht jeder Absatz jetzt aus wie 

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

Kann jemand eine geeignete Alternative vorstellen?

*** Dann ist es mit JQuery einfach, diese TD -ID zu greifen und sie mit dem zu füllen, was ich will.

Bearbeiten Sie nach Andres Antwort:

Ich habe also eine Reihe von Absätzen.

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

Ich möchte in der Lage sein, beispielsweise den dritten Absatz Text oder ein Bild oder ein Element hinzuzufügen, um so etwas wie zu bekommen:

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

Mit einem Layout wie:

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

... wo die Breite festgelegt ist

Das Problem, das ich bei Andres Lösung sehe, ist, dass ... tatsächlich nein, eine leere Spannweite passt gut, einen ID mit dem Absatz zugeordnet ist, an den sie gebunden ist, damit er bei Bedarf gefüllt werden kann, und jeder Absatz kann klar sein.

Und es sollte keine Lücken zwischen [p] geben, wenn [IMG] größer ist.

Ich werde es testen und dann die Antwort vergeben, denke ich.

War es hilfreich?

Lösung

Nun, Ihre Kilometerleistung kann mit verschiedenen Browsern variieren und wie gut sie mit Schweben und klar umgehen, aber dies hat ziemlich gut mit IE 7, Google Chrome und Firefox 3.5 funktioniert:

<!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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top