素胚勾勒不出你
其实，既然使用了CSS，HTML怎么写都无所谓。只要注意一点，就是要注意HTML标签自身的默认样式及一些特别之处。例如table会影响性能，ul内边距和圆点等。由于名字是不定长度的，所以使用width是不行的。同时，为了保证布局一致，所以在不定width的情况下，只能用table和grid布局了。在考虑table渲染性能的情况下，使用grid布局。<div class="messages"> <div class="name">GEORGE</div> <div class="content">Two return tickets to ...</div> <div class="name">ATTENDANT</div> <div class="content">At nineteen minutes ...</div> <div class="empty-line"></div> <div class="name">GEORGE</div> <div class="content">Which platform?</div></div>.messages { display: grid; grid-template-columns: auto 1fr;}.name { white-space: nowrap;}.name::after { content: ":";}.content { text-align: justify;}.empty-line { grid-column-end: 3; grid-column-start: 1; height: 1em;}名字和说的话不在一行比较简单。因为不必考虑每行的名字长度是否统一的问题<div class="messages"> <div class="name">GEORGE</div> <div class="message"> <p>Two return tickets to ...</p> <p>Two return tickets to ...</p> </div></div>.messages { margin-bottom: 1em;}.name { content: ":";}/* 以下对于.message的样式三选一 *//* 使用margin-left缩进 */.message { margin-left: 2em;}/* 使用padding-left缩进 */.message { padding-left: 2em;}/* 使用text-indent缩进 */.message { text-indent: 2em;}