Question

我的页面上有一堆div，我需要以这样的方式渲染它们，以便它们显示在4列中，并且所有四个都以父div为中心。

可以在JS代码中完成吗？是否有可能只做css？推荐哪一个？

这是我到目前为止所做的：Fiddle DEMO

$(document).ready(function () {
    var listItems = $(".item");
    listItems.each(function (index, value) {
        if (index % 4 == 0) {
            // what should i do here? 
        }
    });
});

Answer 1

让每个第5个元素清除你的花车。

clear:both

http://jsfiddle.net/m3MK3/

Answer 2

您可以使用column-count CSS属性。

.container {
    column-count:4;
    -moz-column-count:4; /* Firefox */
    -webkit-column-count:4; /* Safari and Chrome */
}

Answer 3

如果您想在此处运行，请执行fiddle

$(document).ready(function () {
    var myGrid = $("#myGrid"),
        listItems = $(".item"),
        width = 0;
    listItems.each(function (index, value) {
        if (index === 4) {
            return false;
        } else {
            width += 50;
        }
    });
    myGrid.css('width', width);
    myGrid.css('margin-left', -1 * width / 2);
    myGrid.css('margin-top', -1 * width / 2);

});

如何以4列格式呈现div？

3 个答案: