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

不使用表格而是使用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为您提供了空格敏感的固定宽度文本，因此列的工作方式与上面类似（实际上，您只能查看source或inspect元素）。如果您需要，StackOverflow似乎使用Google Prettify进行突出显示。

在CSS中创建/对齐列而不使用表

2 个答案: