Question

我尝试编写一个简单的脚本，将图像容器对齐到css baselinegrid。这是一个近乎有效的例子：jsfiddle

var lineHeight = 24;

$('.grid').height(function(i, h) { return Math.ceil(h / lineHeight) * lineHeight; });

$(window).resize(function() {
    $('img').each(function() {
        var heightDiv = $(this).outerHeight();
        $('.grid').css('height', Math.ceil(heightDiv / lineHeight) * lineHeight);
    });
});
$('img').load(function() { $(window).resize(); });

唯一的问题是，在调整大小时，所有图像容器都会占用最后一个图像的高度而不是它自己的高度。任何人都可以帮助我，我是非常非常新的javascript

Answer 1

你可能想要更接近这个：

$('img').each(function() {
    var heightDiv = $(this).outerHeight(),
        $parent = $(this).parent();
    $parent.css('height', Math.ceil(heightDiv / lineHeight) * lineHeight);
});

通过引用$（＆＃39; .grid＆＃39;），您调用的所有元素都包含＆＃39;网格＆＃39;类。你真正想要的是直接的父母。

以下是我所谈论的一个有效例子： http://jsfiddle.net/jxrfqkxu/7/

使用javascript的基线网格

1 个答案: