html - 如何替换循环（'float：left'，'float：right'）以使用纯css？

Question

有什么方法可以替换cycle('float: left', 'float: right')，而不是使用cycle助手，我可以使用纯 css 类。我需要在单个列内左右对齐 div。使用循环会导致缓存出现一些困难，因此最好使用静态样式。

<div class="userCards">
    <div class="singleCard <%= cycle 'cardLeft', 'cardRight' %>">
        <!-- content -->
    </div>
</div>

请注意，它userCard具有固定的高度，overflow: hidden 并且width: 48%。

Answer 1

听起来像是nth-child()选择器的工作：

.userCards .singleCard:nth-child(odd) {
  float: left;
}

.userCards .singleCard:nth-child(even) {
  float: right;
}