如何创建动态响应四列到两列边框

Question

我正在创建一个包含四列的响应式网站。

因此，当页面变小时，它将变为两列，然后第二个元素的border-right样式将被删除，依此类推。我的主要问题是如何在不使用该元素的硬编码样式的情况下定位列或元素，例如：

   /* don't want to use this since it'll be dynamic list*/
   #spring-vet-inner .sv-list:nth(2) { clear:both; }

由于我将custom_types中的内容与 wordpress 放在一起，所以我将插入多个数据列表。这是我的Fiddle。

Answer 1

您可以使用:nth-child(4n+1)定位每个第5个元素，以进行清算。

然后您可以使用:nth-child(4n)删除每个第4个元素的边框。

这样，就造型而言，您拥有的物品数量并不重要。

您还可以改善宽度，以获得更好的响应速度和更具移动性的方法。您可以使用百分比代替硬编码宽度。例如：

#spring-vet-inner .sv-list { 
    float:left; 
    width:50%; 
}

@media (min-width:768px){
    #spring-vet-inner .sv-list {
        width:25%;
        min-height:250px;
        border-right:solid 1px #000
    }
    #spring-vet-inner .sv-list:nth-child(4n) {
        border-right:0 none;
    }
    #spring-vet-inner .sv-list:nth-child(4n+1) {
        border-right-color:red;
        clear:both;
    }
}

您也可以为桌面添加父max-width。

JSFiddle

JSFiddle full screen（只需在网址末尾添加＆＃39; / show＆＃39;）

Answer 2

您可以使用:nth-child(even)

由于第2列和第4列始终为“偶数”，因此您可以告诉他们删除border-right。

---

更新：

以下是有关如何处理4个以上项目的更新：

#spring-vet-inner .sv-list:nth-child(4n+4) {
    border-right:none;
}
#spring-vet-inner .sv-list:nth-child(4n+5) {
    clear:both;
}
@media screen and (max-width: 818px) {
    #spring-vet-inner .sv-list:nth-child(2n+2) {
        border-right:none;
    }
    #spring-vet-inner .sv-list:nth-child(2n+3) {
        clear:both;
    }
}

尝试在此Live Demo

中调整浏览器的大小

Answer 3

如果您只需要支持现代浏览器，请使用媒体查询来识别屏幕小时。 例如，我看到你的列每个都是200px宽，右边有1px边框。因此，布局需要成为2列布局的宽度将是4列的宽度=（200 + 1 + 200 + 1 + 200 + 1 + 200 +身体填充的额外）= 803px + 12px = 815px

然后css将成为：

@media screen and (max-width: 815px) {
  #spring-vet-inner .sv-list{ width:49%;}
  #spring-vet-inner .sv-list:nth-child(odd){clear:both;}
  #spring-vet-inner .sv-list:nth-child(even){ border-right:none;}
}

宽度设置为49％，因此占用整行，使用奇数和偶数元素，因为它们是2的倍数。

update your code in jsFiddle Link 希望这有帮助。