子比主题美化–文章列表显示修改列表[一行两个]卡片[一行五个]

用过子比主题的都知道，首页列表卡片模式只能一行四个，列表模式一行一个，今天我们就尝试一下用代码来改变它的样式。

卡片模式x5

代码放置：网站后台 -> Zibll主题设置 -> 全局&功能 -> 自定义代码 -> 自定义CSS样式

/*文章卡片排列X5*/
@media (min-width: 769px) {
    .posts-item.card {
        width: calc(20% - 16px);
    }
}

括号里的数值可以自己定义，不难理解就是控制卡片&列表宽度用的。这个根据自己的页面情况需求修改就好！

需要多个列表修改百分比即可，5个=20%以此类推。

列表模式x2

代码放置：网站后台 -> Zibll主题设置 -> 全局&功能 -> 自定义代码 -> 自定义CSS样式

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

括号里的数值可以自己定义，不难理解就是控制卡片&列表宽度用的。这个根据自己的页面情况需求修改就好。

需要多个列表修改百分比即可，2个=50%以此类推。

注：双列模式下文章形式为“图库”会有几率影响版面错乱。

因为标题有些显示一行，有些显示2行，排版会错乱，所以根据我自己的网站，进行了调整：

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

height: 180px;是限制高度的，我们不能让模块自己随意显示，不然很容易错位，用这个限制在180px，比较全面。

其他相关

/*隐藏卡片列表内容并取消占位*/
.theme-bg{background: var(--main-bg-color);border-radius:10px;}   /*大盒子背景，可以是图片，需要更改文件class，不更改应该也可以*/
.posts-item.card .item-tags{visibility: hidden;DISPLAY: none;}   /*隐藏标签*/
.posts-item.card .item-meta{visibility: hidden;DISPLAY: none;}   /*隐藏浏览量数据*/
/*卡片列表标题*/
.tab-content>.active {padding: 0px 10px;}  /*边距*/
.index-tab ul>li.active { height: 40px;width: 100%;background: var(--muted-bg-color);border-radius:10px 10px 0px 0px;margin: 0;padding:8px 20px; }   /*盒子标题样式背景*/
.index-tab ul>li.active a {color: var(--key-color)!important;font-weight:bold;vertical-align:text-top;}  /*标题字体样式*/
.posts-item .item-heading {-webkit-line-clamp: 1;}   /*文章标题行数从2行修改位1行*/
.posts-item.card .item-heading {min-height: 0;}   /*文章标题盒子高度修改*/

👋 感谢您的观看！