CSS 文本换行垂直对齐

Posted 2023-03-05

【中文标题】CSS 文本换行垂直对齐

【英文标题】：CSS text wrap vertical alignment

【发布时间】：2015-01-17 12:52:09

【问题描述】：

我正在使用 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 上的文本换行到第二行时，它会将下面的其他两个向下推，并且该列与其他列垂直“错位”。

【参考方案1】：

这是一个古老的问题。 :?

我想出的解决方案是使用 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 就足够了。感谢您的快速回复。我实施了您的建议，这绝对是向前迈出的一步。小时标签太接近小时值。必须对此进行微调。

你可以用 CSS3 和 flexbox 做一些事情，但它不会跨浏览器兼容:)

【参考方案2】：

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

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

【讨论】：

我猜我在这里搜索不太擅长，但我确实试图找到一些解决这个问题的答案。现在去看看你的建议，谢谢。

是的，你需要合并一个 window.resize 事件来重新运行 autoHeight 方法。好调用

这个问题出现了很多，因为人们跳过了学习 CSS 而只是去一个框架，这是一种耻辱。

感谢克里斯蒂娜提供的有用见解。

matchHeight 也可以开箱即用，而且还可以保持间距。好东西。希望它的警告不会浮出水面，因为我还使用了 fadeIn() 和网络字体。现在只需要看看我是否可以使文本与底部/顶部对齐。