时间戳

首页 > 解决方案 > 样式动态生成的 div

html - 样式动态生成的 div

问题描述

我正在尝试设置与首页相呼应的 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;
}

标签： htmlcsswordpress

解决方案

如果你删除这些float属性，我相信你会得到你想要的效果。如果您希望保留偏移间距，您可以添加一个position:relative;to.popImage并使用toporbottom来设置偏移值。

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

如果是我，我可能会使用flexbox :)

推荐阅读