javascript - li 使用书签时垂直折叠的项目

Question

我正在制作这个网站：

http://frankkluytmans.nl/testsite/

并制作一个列表视图，在其中我使用 wookmark jquery 插件使列表项垂直对齐。现在列表项正在垂直折叠（参见链接）。我能做些什么来解决这个问题？

CSS：

#content ol {
    position: relative;
    display: block;
    margin-left: -2%;

    list-style-type: none;
}

#content ol li {
    display: block;
    width: 18%;
    height: auto;
    margin-left: 2%;
    margin-bottom: 20px;
    padding: 3px;

    background: white;
    float: left;    
}

#content ol li img {
    width: 100%;
    border: none;   
}

JS：

$('#content ol li').wookmark({
     container: $('#content ol'),
     offset: 20
});

Answer 1

我能够自己制定解决方案。事实证明，webkit 浏览器需要首先加载图像才能计算列表元素的正确高度。

我将我的 JS 调整为：

 $("img").load(function() {
        $('#content ol li').wookmark({
            container: $('#content ol'),
            offset: 15
        });
    });