其實，既然使用了CSS，HTML怎么寫都無所謂。只要注意一點，就是要注意HTML標(biāo)簽自身的默認樣式及一些特別之處。例如table會影響性能，ul內(nèi)邊距和圓點等。

由于名字是不定長度的，所以使用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;

}

名字和說的話不在一行比較簡單。因為不必考慮每行的名字長度是否統(tǒng)一的問題

<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;

}