如何正确地将 wordpress 搜索结果帖子与 css 对齐？

Question

我的网站有问题，因为我想连续对齐 3 个帖子，并且想正确调整到右侧的侧边栏。因为我使用 margin-right: 18px;在每个块上，它不能移动到右上角，就像在主页上一样：virmodrosti.com

问题来了： http://www.virmodrosti.com/?s=minerali

与主页比较，您就会明白我的意思。 我还加了图片wordpress theme

目前每个帖子块的宽度是260px，如果我把它改成264它会跳到下一行，并且每行只显示2个帖子而不是3个。

在图片上有三个问题可以解决，但我很高兴知道主要问题的解决方案。

请告诉我，谢谢。

Answer 1

您需要向每 3 个 .post 元素添加 css 以删除 18px 边距，如下所示：

#content-a .post:nth-of-type(3n) {
    margin-right: 0;
}

要计算缺少此边距的宽度，您可以添加：

#content-a .post {
    width: calc(33.33% - 12px);
    /*12px = 18px margin * 2 and divided by the three columns)*/
}

由于您的分页分为两列，因此值得将上面的两个代码 sn-ps 包装在媒体查询中，例如：

@media only screen and (min-width: 1000px){
    #content-a .post {
        width: calc(33.33% - 12px);
    }
    #content-a .post:nth-of-type(3n) {
        margin-right: 0;
    }
}