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

Question

我有布局问题。 我的全局行高为20px（.A）。在某些偶然情况下，对于非常小的字体（.B），我使用10px的行高。问题是当我有两列时，第一列有<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不匹配）

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