テーブルを使用せずにCSSの列を作成/整列する

Question

私はユニークな設計上の質問があります。基本的に私はチャットスクリプトを書いており、レイアウトをもっと統一したいと思っています。各行に新しいテーブルを作成せずに、チャット・ラインごとに固有の列セットを持つことは可能ですか？例えばこれは私が理想的に探しているデザインです。

[TimeStamp] Me: I am writing a long message and this text will be 
        wrapped to the next line. See how the message text 
        is aligned perfectly when wrapped? 
    [TimeStamp] Them: When they write a message that requires wrapping 
         it aligns perfectly for them. 
    [TimeStamp] OtherPeople: I think this makes the concept clear if it 
          needs wrapping it aligns for each "poster" 

すべてのメッセージに対して1つのテーブルを作成すると、特定の列を必要以上に長くすることがあります。新しいポストごとに新しいテーブルを作成することでこれを達成できることが分かりました。これを行うためのより多くの「Web 2.0」CSS方法があるかどうか疑問に思っています。どんな助けもありがとうございます。

Answer 1

表を使用する代わりに、ポスター名とテキストにdivsを使用します。そう

：

<div id="everything"><div id="everythingInside"> 
<div id="timestamp">[timestamp]</div> 
<div id="poster">TheCoolGuy</div> 
<div id="comment">I"m cooler than you!</div> 
</div> 
</div> 

、その後、それを表として表示するには、CSSを使用します。もちろん

#everything { display: table; } 
#everythingInside { display: table-row; } 
#timestamp, #poster, #comment { display: table-cell; } 

を、同様のdiv、さらにCSSを使用して、他の方法があります。

Answer 2

使用code、pre、（とvar、span、div）と友人。 preとcodeは空白に敏感な固定幅のテキストを提供するので、列は上のように機能します（実際には、sourceまたはinspect要素を表示できます）。あなたがそれを必要とする場合、StackOverflowはGoogle Prettifyを使用して強調表示を行うようです。