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

如果您删除float属性，我相信您将会获得想要的效果。如果要保留偏移间距，可以在position:relative;上添加.popImage并使用top或bottom来设置偏移值。

啊，要解决左右平衡问题，可以将.popImage容器限制为仅容纳两个图像。

如果是我，我可能会使用flexbox：）

Answer 2

我不太了解您的问题，但是，您似乎想在将新帖子与最后一篇帖子放在一起的每列中创建一个2列网格。这是我要给出的摘录的表示形式：

~~~~~

| [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伪元素清除浮动，例如：

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

希望我进一步推动了你。

样式动态生成的Divs

2 个答案: