html - 样式动态生成的 Div

Question

我正在尝试设置回显到首页的 div 的样式。

我在 WordPress 工作，所以当用户创建新帖子时，我希望第一个帖子贴在左边，然后下一个贴在右边，依此类推。

我是这样尝试的:

            echo '<div class="popImage">';
            the_post_thumbnail();
            echo '</div>';

然后使用 :nth-child(odd) 和 :nth-child(even) 定位它。但是，在创建第三个帖子时，在前端，该框会出现在第一个帖子的旁边。

我想知道是否有任何方法可以做到这一点，或者我的整个方法是否根本不正确。如有任何帮助，我们将不胜感激。

下面是失败的 CSS:

.popImage {
width: 15rem;
height: 15rem;
background-color: #3700ff;
display: inline-block;

}

.popImage:nth-child(even) {
float: left;
}

.popImage:nth-child(odd) {
float: right;
background-color: yellow;
}

Answer 1

我不太明白你的问题，但是，你似乎想在每一列中制作一个 2 列的网格，你将新帖子放在最后一个帖子旁边。这是我将给出的代码片段的表示形式:

~~~~~

| [p] [p] |

| [p] [p] |

| [p] [p] |

~~~~~

希望你明白我的意思。所以，这里有一个片段来完成这个网格(我将在这里使用 float 作为你的尝试，但是，我强烈建议你改用 flexbox):

.popImage {
    margin: 1rem 0;
    width: 49%;
    height: 15rem;
    background-color: #3700ff;
    display: block; /* must be block in order to work correctly */
    float: left;
}
.popImage:nth-child(even) {
    margin-left: 1%;
}
.popImage:nth-child(odd) {
    background-color: yellow;
    margin-right: 1%;
}
.popImage img {
    height: 100%; 
    width: 100%;
}

Ps: 我建议使用一个容器来包装所有 .popImage div 的帖子，然后使用它的 : :after伪元素清除 float ，例如:

.popImageWrapper:after {
    content: "";
    display: table;
    clear: both;
    /* writing only one colon before the word after instead of two colons(::) to support older browsers */
}

希望我能进一步插入你。