文章卡片和文章列表
本文共551 个字, 需约2 分钟阅读。本文最后更新时间为2024年11 月2日, 部分内容具有时效性,如有失效请留言告知,阅读量:869 阅读
首页列表卡片模式只能一行四个,列表模式一行一个,今天我们就尝试一下用代码来改变它的样式!最近发现很多站长朋友在问这个,趁今天有时间更新一下。
HTML
/*文章卡片排列X5 huliku.com*/
@media (min-width: 769px) {
.posts-item.card {
width: calc(20% - 16px);
}
}
HTML括号里的数值可以自己定义,不难理解就是控制卡片&列表宽度用的。这个根据自己的页面情况需求修改就好!
需要多个列表修改百分比即可,5个=20%以此类推。
HTML
/*文章列表排列X2 huliku.com*/
@media (min-width: 1500px) {
.posts-item {
display: inline-flex;
width: calc(50% - 16px);
}
}
HTML括号里的数值可以自己定义,不难理解就是控制卡片&列表宽度用的。这个根据自己的页面情况需求修改就好!
需要多个列表修改百分比即可,2个=50%以此类推。
注:双列模式下文章形式为“图库
”会有几率影响版面错乱。
版权声明:
作者:Caton
链接:https://faq.gebin.show/79.html
文章版权归作者所有,未经允许请勿转载。
全篇结束