javascript - 如何创建具有边框样式的动态响应式四列？

Question

我正在开发一个响应式的四列，我想让它动态化，因为我将为 wordpress 中的 custom_post 创建这个列。这是我的问题。

因为它是动态的，所以最大列是 4 所以我有这个元素列表我想删除最后一个元素的 border-style 这样我就可以使用 :last- child 但我的问题是，如果正在调整页面大小，则列将拆分为 3 、 2 、 1 等等，而且如果我只有 1 或 2 或 3 个元素，我该如何定位这些元素并拥有中间的那些边界并使其水平居中。我需要用 jquery 来做这个还是我可以用纯 CSS 来做？

查看我的 fiddle
注意:我可以拥有尽可能多的元素。

Answer 1

您肯定需要@media 查询边界。

将您可以使用的元素居中

#spring-vet-inner {
    text-align: center;
}

#spring-vet-inner .sv-list {
    display: inline-block;
    width:50%;
    text-align:center;
    margin-top:40px;
    box-sizing:border-box;
}

https://jsfiddle.net/stby04/m1x78tL2/