在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"

如果我为所有消息创建一个表，它可能会使某些列比它们应有的长度更长。我知道为每个新帖子创建一个新表可以做到这一点，只是想知道是否有更“Web2.0”的CSS方式来做到这一点。任何帮助都是非常感谢的。

Answer 1

不使用表格，而是使用div作为海报名称和文本。

所以：

<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为您提供了对空格敏感的固定宽度文本，因此列的工作方式与上面类似(实际上，您可以只查看源代码或检查元素)。如果您需要的话，StackOverflow似乎使用Google Prettify来进行高亮显示。