如何使用边框样式创建动态响应四列？

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/

Answer 2

来自我之前的评论：

---

如果选择第一个项目来删除边框，则从左侧绘制边框可能更容易排序。

＆＃13;

＆＃13;

/* parent , here body */
body {
    text-align:center;
  }
#spring-vet-inner .sv-list {
    display:inline-block;
    vertical-align:top;
    width:49%;
    text-align:center;
    margin-top:40px;
    box-sizing:border-box;
}
@media (min-width:768px) {
    #spring-vet-inner .sv-list {
        width:24%;
        min-height:250px;
        border-left:solid 1px #002320
    }
    #spring-vet-inner .sv-list:nth-child(4n-2) {
        border-left-color:red;
    }
    #spring-vet-inner .sv-list:nth-child(4n+1) {
        border-left:0 none;
        clear:both;
    }
}
#spring-vet-inner .sv-list:first-of-type {
    border-left:none;
}
#spring-vet-inner .sv-list p {
    font-family:"RalewaySemiBold";
    font-size:16px;
    margin-bottom:20px;
    padding-top:18px;
}
#spring-vet-inner .sv-list h1 {
    font-family:"NeutraTextDemiAlt";
    font-size:18px;
    margin-bottom:42px;
    font-weight:normal;
}
#spring-vet-inner .sv-list h1 span {
    display:block;
}

＆＃13;

<div id="spring-vet-inner">

  <div class="sv-list">
    <p>FELINE DENTISTRY</p>
    <h1>ORLANDO <span>APRIL 11 & 12</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>

  <div class="sv-list">
    <p>CANINE DENTISTRY</p>
    <h1>ORLANDO <span>MARCH 14 & 15</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>

  <div class="sv-list">
    <p>FELINE DENTISTRY</p>
    <h1>ORLANDO <span>APRIL 11 & 12</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>
  <div class="sv-list">
    <p>CANINE DENTISTRY</p>
    <h1>ORLANDO <span>MARCH 14 & 15</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>

  <div class="sv-list">
    <p>FELINE DENTISTRY</p>
    <h1>ORLANDO <span>APRIL 11 & 12</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>

  <div class="sv-list">
    <p>CANINE DENTISTRY</p>
    <h1>ORLANDO <span>MARCH 14 & 15</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>

  <div class="sv-list">
    <p>FELINE DENTISTRY</p>
    <h1>ORLANDO <span>APRIL 11 & 12</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>
      <div class="sv-list">
    <p>CANINE DENTISTRY</p>
    <h1>ORLANDO <span>MARCH 14 & 15</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>

  <div class="sv-list">
    <p>FELINE DENTISTRY</p>
    <h1>ORLANDO <span>APRIL 11 & 12</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>

  <div class="sv-list">
    <p>CANINE DENTISTRY</p>
    <h1>ORLANDO <span>MARCH 14 & 15</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>

  <div class="sv-list">
    <p>FELINE DENTISTRY</p>
    <h1>ORLANDO <span>APRIL 11 & 12</span> 2015</h1><a class="btn-learn" href=
    "#">LEARN MORE</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

无论如何，

nth-child计数对于每个列数都是必要的（从first-of-type / :first-child进行调整）

为什么先选择？ 因为如果它是独立的，它也是最后的......困境，风格压倒了... :)

Answer 3

与上面提到的一样，您需要根据所需的屏幕宽度为每个尺寸设置断点。例如，如果添加此CSS代码，则使用JS.Fiddle：

@media (max-width:767px){
    #spring-vet-inner .sv-list:nth-child(odd) {
        border-right: 1px solid red;
    }
}

页面容器缩小后，边框会正确显示2列布局。你可以看到你的updated JS Fiddle here。这应该让你开始。希望有所帮助。