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