Javascript 如何以4列格式呈现div？

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

可以在JS代码中完成吗？只有css才能做到这一点吗？推荐哪一种

以下是我迄今为止所做的工作：

---

只要让第五个元素清除你的浮动

清除：两个

---

您可以使用

列计数

CSS属性

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

---

如果你想在这里跑步，这里有一个

---

谢谢实际上，我尝试了这个，因为它是一个css唯一的解决方案。。但是它把桌子一分为二。在这里，您定义了外部div。而且你可以很容易地将它居中。

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

$(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);

});