テーブルを使用せずに、テキスト内の特定の段落の横にあるレイアウト要素

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

  •  05-07-2019
  •  | 
  •  

質問

したがって、Webページには、段落形式で大量のテキストが表示されます。目標は、画像やテキストなどの要素を、段落をまったく変更せずに段落17または26の隣に配置することです（つまり、段落をラップする必要はありません）。

これまでのところ私が見ることができるこれを行う最良の方法は、テーブル内のテキスト、テキストの列（および各行に1つの段落）、およびIDによって配置された要素で埋めることができる空（IDは行番号です）。

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

<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   ]

...幅は固定されています

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

そして、[img]が高い場合、[p]の間にギャップがあってはなりません。

テストして、私が思う答えを授与します。

役に立ちましたか？

解決

まあ、あなたの走行距離はブラウザやフロートとクリアの処理方法によって異なりますが、これは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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top