CSS 文本换行垂直对齐

Question

我使用的是 Bootstrap，一行有 6 个网格列。第一列定义如下:

<div class="hour-item col-sm-1 col-ms-1 col-sm-offset-3 col-ms-offset-3">
  <div class="hour-label" id="hour-label-1"></div>
  <div class="hour-value" id="hour-value-1"></div>
  <div class="hour-weekd" id="hour-weekd-1"></div>
</div>

其余列几乎相同，没有偏移类，并且内部 div id 编号递增(-2，... -6)

我的目标是让中间的 div (hour-value-x) 始终在它们之间对齐，一条直线。但问题在于，当第一个内部 div 上的文本换行到第二行时，它会向下推其下方的其他两行，并且该列与其他列垂直“错位”。

Answer 1

这个问题之前已经在这个网站上回答过很多次了。

有多种方法可以做到这一点，但最好的方法是使用一些 javascript 来匹配不同内部 div 的高度。尽管 Wes Duff 发布的 js 很好，但它不会涵盖所有情况，例如用户调整浏览器大小时。使用类似 match height 的东西会更好。