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 或香草）来强制 <p> 的高度是 20px 的倍数。

即 偶数行（.A匹配）

奇数行（.A不匹配）

Answer 1

此代码将在 window 调整大小事件中将所有 <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);