puock主题朋友圈界面多图样式分享

共计 2278 个字符，预计需要花费 6 分钟才能阅读完成。

具体展现效果可以参考动态页面，纯CSS代码完成。
代码如下：

#page-moments {
    --img-gap: 6px;
    --img-radius: 8px;
}
#page-moments .moment-content p:has(img) br {
    display: none !important;
    content: "" !important;
    height: 0 !important;
}
#page-moments .moment-content p:has(img) {
    font-size: 0 !important;
    line-height: 0 !important;
    display: block !important;
    margin: 0 0 1em 0 !important;
    padding: 0 !important;
}
#page-moments .moment-content p:has(img) > :not(img):not(br) {
    font-size: 16px !important;
    line-height: 1.6 !important;
    display: block !important;
    margin-bottom: 10px !important;
}
#page-moments .moment-content p:has(img) img {
    display: inline-block !important;
    vertical-align: top !important;
    border-radius: var(--img-radius) !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    margin-right: var(--img-gap) !important;
    margin-bottom: var(--img-gap) !important;
}
#page-moments .moment-content p:has(img) img:last-child {
    margin-right: 0 !important;
}
#page-moments .moment-content p:has(img) img:nth-last-child(-n+3) {
    margin-bottom: 0 !important;
}
#page-moments .moment-content p:has(img:only-child) img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    margin: 0 auto !important;
    display: block !important;
}
#page-moments .moment-content p:has(img:nth-of-type(2):last-of-type) img {
    width: calc(50% - var(--img-gap)/2) !important;
    aspect-ratio: 1 !important;
    height: auto !important;
}
#page-moments .moment-content p:has(img:nth-of-type(3):last-of-type) img {
    width: calc(33.333% - var(--img-gap)) !important;
    aspect-ratio: 1 !important;
    height: auto !important;
}
#page-moments .moment-content p:has(img:nth-of-type(4):last-of-type) img {
    width: calc(50% - var(--img-gap)/2) !important;
    aspect-ratio: 1 !important;
    height: auto !important;
}
#page-moments .moment-content p:has(img:nth-of-type(4):last-of-type) img:nth-of-type(2n) {
    margin-right: 0 !important;
}
#page-moments .moment-content p:has(img:nth-of-type(4):last-of-type) img:nth-of-type(n+3) {
    margin-bottom: 0 !important;
}
#page-moments .moment-content p:has(img:nth-of-type(n+5)) img {
    width: calc(33.333% - var(--img-gap)) !important;
    aspect-ratio: 1 !important;
    height: auto !important;
}
#page-moments .moment-content p:has(img:nth-of-type(n+5)) img:nth-of-type(3n) {
    margin-right: 0 !important;
}
@media (max-width: 768px) {
    #page-moments .moment-content p:has(img:not(:only-child)) img {
        aspect-ratio: 1 !important;
        height: auto !important;
    }
}