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之类的东西会更好。

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'));

CSS文本换行垂直对齐

2 个答案: