如何使用CSS设置对话/对话框的样式？

Question

我正在尝试重现这样的东西，但我不确定它叫什么：

我对标记很灵活，但可能是这样的：https://codepen.io/nachocab/pen/LaBwzw

.container  {
  width: 600px;
 }
.speaker {
  padding-right: 20px;
}

.speaker::after {
  content: ':';
 }

<div class="container">
  <p class="line">
    <span class="speaker">Mary</span><span class="sentence">Hello</span>
  </p>
  <p class="line">
    <span class="speaker">Luke</span><span class="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenean fringilla pharetra metus id blandit.</span>
  </p>
</div>

Answer 1

由于您需要对齐所有字符名称，因此最好的选择是使用普通旧表或更现代的CSS网格。网格可以提供更多的控制，也许对我有更多经验的人可以提出解决方案。这是你如何用桌子做的。请注意，如果您关心语义，则始终可以将表显示选项应用于非表元素。

.dialogue {
  border-spacing: 0;
}

.dialogue th, .dialogue td {
  padding: 0 0 1em 0;
  vertical-align: top;
}

.dialogue th {
  text-align: right;
  white-space: pre;
}

.dialogue td {
  text-align: left;
}

<table class="dialogue">
  <tr class="dialogue-alice">
    <th>Alice Bob: </th>
    <td>Culpa eiusmod qui enim Lorem quis aliquip Lorem id. Incididunt velit fugiat irure tempor ad culpa officia. Laborum magna dolor consequat ipsum aute eiusmod ad eu aute enim magna id non esse. Laborum mollit labore aute consectetur culpa cupidatat. Excepteur esse tempor proident reprehenderit minim duis. Irure eu ullamco ex non dolore sit duis consectetur eu enim officia cillum.</td>
  </tr>
  <tr class="dialogue-bob">
    <th>Charles Dickens: </th>
    <td>Anim duis laboris commodo mollit incididunt et cupidatat anim aliquip ipsum pariatur veniam. Sint amet esse et esse ea ea consequat ea. Dolore fugiat id et qui esse et ullamco sunt elit velit id.</td>
  </tr>
</table>

Answer 2

你可能想要这样的东西，以便.speaker不与.sentence元素重叠。

我已经将display: flex应用于.line，以便他们并排坐着。

.container {
  width: 600px;
}

.speaker {
  padding-right: 10px;
}

.speaker::after {
  content: ':';
}

.line {
  display: flex;
}

<div class="container">
  <p class="line">
    <span class="speaker">Mary</span><span class="sentence">Hello</span>
  </p>
  <p class="line">
    <span class="speaker">Luke</span><span class="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenean fringilla pharetra metus id blandit.</span>
  </p>
</div>

Answer 3

您可以尝试此代码

另外，你创建它使用flexbox请学习flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: table;
}
.message-row {
  display: table-row;
}
.user,
.message {
  display: table-cell;
  text-align: left;
}

<table style="width:100%">
  <tr>
    <td>Mary </td>
    <td>: Hello</td> 
  </tr>
  <tr>
    <td>Luke</td>
    <td>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</td> 
  </tr>
</table>

 <hr>
<div class="parent">
  <div class="message-row">
    <div class="user">Mary</div>
    <div class="message">: Hello</div>
  </div>
  <div class="message-row">
    <div class="user">Luke</div>
    <div class="message">: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</div>
  </div>
</div>