0

そのため、Web ページには長いテキストが段落形式で表示されます。目標は、段落 17 または 26 を変更せずに、写真やテキストなどの要素を段落 17 または 26 の隣に配置することです (つまり、段落が回り込む必要はありません)。

これまでのところ、これを行うための最良の方法は、テキストを表、テキストの列 (および各行に 1 つの段落)、および配置された要素を ID (ID行番号です)。

これはかなり不格好に思えます。1 つには、追加された要素が段落よりも縦方向に長い場合、元のテキストにギャップが作成されます。別の例では、各段落は次のようになります

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

誰かが適切な代替案を思いつくことができますか?

***その後、jQuery を使用すると、その td ID を簡単に取得して、必要なものを入力できます。

アンドレの答えの後に編集：

だから私は一連の段落を持っています。

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

次のようなものを取得するために、たとえば 3 番目の段落にテキスト、画像、または何らかの要素を追加できるようにしたいと考えています。

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

次のようなレイアウトで：

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

...幅が固定されている場合

アンドレのソリューションで私が目にする問題は...実際には、いいえ、空のスパンがうまく収まり、バインドされている段落にIDが関連付けられているため、必要に応じて塗りつぶすことができ、各段落をクリアできます。

また、[img] の方が高い場合、[p] の間に隙間があってはなりません。

私はそれをテストしてから、私が考える答えを授与するつもりです.

4

2 に答える 2

1

まあ、あなたの走行距離はブラウザによって異なり、フロートとクリアをどれだけうまく処理するかによって異なるかもしれませんが、これは IE 7、Google Chrome、および 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>
于 2009-09-09T23:17:33.170 に答える