js <p> 高度总是 20px 的倍数

Question

我有一个布局问题。 我的全局行高是 20px (.A)。在某些情况下，我会为非常小的字体（.B）使用 10 像素的行高。问题是当我有两列，第一列有<p class="B"></p><p class="A"></p>，第二列有<p class="A"></p>，有时两个<p class="A"></p> 没有对齐，这取决于<p class="A"></p> 的行数。

所以我正在寻找一个小的 js 脚本（jQuery 或 vanilla）来强制 <p> 的高度为 20px 的倍数。

即 偶数行（.A 匹配）

奇数行（.A 不匹配）

Answer 1

此代码将调整所有 <p> 标记的大小，使其高度在窗口调整大小事件中为 20 的倍数：

(function($) {
    $(function() {
        var pTags = $('p');

        $(window).on('resize', function() {
            pTags.each(function() {
                $(this).css({
                    'height': ''
                });

                var currentHeight = $(this).height();
                $(this).css({
                    'height': currentHeight + (20 - (currentHeight % 20))
                });
            });
        }).trigger('resize');
    });
})(jQuery);