前言

大家好，在使用子比主题的时候会为了布局美观而采用一系列css代码进行美化，而文章列表则为最主要内容部分。使用较大文章列表对于整体来说不太美观。下面站长给大家分享几款效果来美化文章列表，可以根据自己的需求自行选择美化的样式

效果一(卡片模式一行两个)

直接将下面的css代码放入到子比主题设置-全局-自定义代码-自定义css代码中就可以了

/*首页文章列表排列X2*/
@media (min-width: 1500px) {
  .posts-item {
    display: inline-flex;
    width: calc(50% - 16px);
  }
}

效果二(卡片模式一行五个)

同样将css代码填入自定义css中即可

/*首页文章卡片排列X5*/
@media (min-width: 992px){
.fluid-widget .card, .site-layout-1 .card {
    width: calc(20% - 16px);
}
}

效果三(卡片模式一行六个)

如上

/*首页文章卡片排列X6*/
@media only screen and (min-width: 1500px){
.posts-item.card {
    width: calc(15.000% - -3px);
}
}

不仅仅是只有这些，也可以根据自己的需求自行更改媒体查询中的函数计算的宽度。@media这一行是媒体查询，其中的.post-item是属性名不用动，只需要修改其中的width中函数进行计算的宽度即可。calc(xxx% – xx像素(px))