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

Webページでは、長いテキストが段落形式で表示されます。目標は、パラグラフ17または26の横に、絵やビットのような要素を置くことです。段落を変更することなく（段落を囲む必要はありません）。テーブルを使用せずに、テキスト内の特定の段落の横にある要素をレイアウトします。

これまで私が見ることのできる最良の方法は、テーブル内のテキスト、テキストの列（および各行の1段落）、配置された要素で塗りつぶすことができる空をラップすることですID（行番号であるID）。

これはむしろやわらかいようです。 1つは、追加された要素が段落よりも垂直方向に長い場合は、元のテキストにギャップが作成されます。別の場合、各段落は次のようになります

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

誰かが適切な代替手段を考えることができますか？

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

EDIT：

だから私は、段落のシリーズを持っています。

私のようなものを得るために、第三段落、たとえば、にテキストや画像やいくつかの要素を追加できるようにしたい

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

：

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

：のようなレイアウトで

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

を

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

私がAndreの解決策に見る問題は...実際には、 pty spanは細かくフィットし、必要に応じて塗りつぶすことができるように、それがバインドされている段落に関連付けられたIDを持ち、各段落はクリアできます。

[img]の背が高いとき[p]との間に隙間があってはいけません。

私はそれを試してから、私が考える答えを授与するつもりです。

出典

2009-09-09 Anonymous

レイアウトはCSSで行うべきです。 – SingleShot

@SingleShotおそらく私は用語のレイアウトを誤解しました。たぶん、これは代わりにデザインの質問です。私はどのようにCSSのレイアウトで何をしたいのかを達成するために、構造的にhtmlを設計するべきですか？これらの要素の表示が動的であることを考えると、構造的にhtmlを設計して、javascriptが段落レベルで正確にやりとりできるようにする必要がありますか？あなたのコメントのbrusquenessは私に私の考えを明確にするよう強要しましたが、私はいくつかのより有用なアイデアが出てくるのを見たいと思います。 –

さて、あなたの走行距離は異なるブラウザとどれだけ彼らはフロートとクリアを扱うと異なる場合がありますが、これは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-09 23:17:33

Hmm。それはうまくいくかもしれませんが、それは私が意味するものではありません。私はそれをもっと明確にするために質問を再調整しています。 –

あなたの調整を考慮してください：ときにはテーブルが正しい方法です。私がここに書いたアプローチは、それが実現しなくなるまで動いていきます...そして、あなたが目標としているすべてのブラウザを意図したように見えるまで、それは微調整とテストの悲惨な試練になります。時にはシンプルさが最も良い場合もあります。 –

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

答えて

関連する問題