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（小時值x）始終對齊，即一條直線。 但是問題在於，當第一個內部div上的文本換行到第二行時，它會將其下的另外兩個推下，而該列在垂直方向上與其他列“未對齊”。

Answer 1

在此站點上，已經多次回答了這個問題。

有幾種方法可以做到，但是最好的方法是使用一些JavaScript來匹配不同內部div的高度。 盡管Wes Duff發布的js很好，但它不能涵蓋所有情況，例如用戶調整瀏覽器大小時。 使用類似火柴的高度會更好。

Answer 2

這是一個古老的問題。 ：？

我想出的解決方案是使用JavaScript。

function autoHeight(ele){
  var height = 0;
  ele.each(function(){
    if($(this).height > height){
      height = $(this).height;
    }
  }).each(function() { $(this).height(height); });

遍歷並找到每個元素的高度，然后為每個元素分配最高的高度。

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

//javascript (using jQuery) will look like
autoheight($('.hour_value'));