换行时 CSS 文本对齐

Question

调整窗口大小时我无法对齐文本，例如在移动。 这是 HTML:

.count-panel {
  float: left;
  width: 64px;
  border: 1px #888 solid;
}

.count {
  font: 15px/18px Roboto, sans-serif;
  font-size: 42px;
}

.message {
  font-size: 20px;
}

.row {
  clear: both;
  margin-bottom: 16px;
}

<div class='table'>
  <div class='row'>
    <div class='count-panel'>
      <span class='count'>1</span>
    </div>
    <div class='message'>This is line one</div>
  </div>
  <div class='row'>
    <div class='count-panel'>
      <span class='count'>2</span>
    </div>
    <div class='message'>This is line two which is longer than the rest so it can test wrapping</div>
  </div>
  <div class='row'>
    <div class='count-panel'>
      <span class='count'>3</span>
    </div>
    <div class='message'>This is line three</div>
  </div>

大尺寸:Larger

较小的尺寸:Smaller

我需要第二行中的文本与其他文本对齐，而不是像图像中那样向左换行。谢谢。

Answer 1

移动设备上的这种行为是由于应用于 .count-panel 元素的 float 。您可以改为使用 flexbox 并清理一些 css 代码，如下所示:

Codepen demo

.count-panel {
  border: 1px #888 solid;
  flex: 0 0 64px;

}

.count {
  font: 15px/18px Roboto, sans-serif;
  font-size: 42px;
}

.message {
  font-size: 20px;
}

.row {
  margin-bottom: 16px;
  display: flex;
}