时间戳

首页 > 解决方案 > 换行时CSS文本对齐

css - 换行时CSS文本对齐

问题描述

我在调整窗口大小时无法对齐文本，例如在移动设备上。这是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>

较大尺寸：较大

较小的尺寸：较小

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

标签： css

解决方案

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

Codepen 演示

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

推荐阅读