Css 更改浮动图元的垂直对齐方式

我正在开发一个活动页面的移动版本，它使用div作为列，使用float作为格式。我想在桌面布局上交替活动海报的两侧，但现在是这样，当浮动垂直堆叠时，活动海报在活动描述之后结束。我一直在CSS和inspector中工作，似乎无法让它工作。我试着从左到右切换浮动，添加clear:both和clear:left/right，并将最小宽度和最大宽度以及列百分比弄乱，但没有效果。测试版网站上的页面链接如下：

---

我觉得应该有一个简单的解决方案。。。非常感谢您的任何想法。

问题是，我注意到您使用的是

.column1

和

.column2

，您交替使用一次用于描述，一次用于海报。因此，在描述的底部添加你的“偶数”海报，这就是它应该做的

这意味着海报的标记最终会比它应该的低，在这种情况下，我建议使用CSS的不同方法

：第n个子项
，因此您的标记保持不变（这意味着海报始终使用
.column1
），但您可以使用CSS根据元素设置样式和浮动

关于如何使用这个强大的伪选择器的另一个非常有用的资源是

编辑：


添加此提琴是为了演示如何使用第n个子项处理此特定问题。请注意我是怎么说的，每一行对
.column1
和
.column2
这样做对我来说似乎很好，海报最终集中在标题和描述上方。。。我不是很清楚这个问题吗？看起来只有当你的窗口宽度小于等于850px时才会出现问题。据我所知，您希望海报始终显示在描述的上方，而不是在描述的上方和下方交替显示。听起来正是我所需要的，但添加了以下内容后：.two_columns_25_75>。column1:nth child（偶数）{float:right！important；}对于CSS，我看不到任何更改，即使在inspector中也是如此。不知道我做错了什么。。。我第一次使用第n个child，所以我肯定我遗漏了一些东西。我还切换了列布局，因此所有海报都在.column1中，所有描述都在.column2中
：第n个child
伪选择器一开始可能会变得非常棘手，但一旦你理解了索引从零开始的事实，您可以使用“偶数或奇数”第n个选择器，依此类推。这里要做的事情是使用
：n子项（偶数）
，因此当
.column1
选择器给我们一个“偶数”时，它有特定的CSS样式（这些样式将是一个浮动到另一侧，并容纳不同的边距和填充）因此，通过这种方式，所有人的标记都保持不变，CSS处理将其设置为一边和另一边。感谢@sulfureous提供的所有帮助。现在我有了伪选择器，但由于某种原因，它应用于所有.column1元素，而不仅仅是奇数元素（尽管我在源代码中看到了第n个子选择器）。我快发疯了。别担心，我正在摆弄一把小提琴，你几分钟就能摆好。