更改浮动元素的垂直对齐方式答案

【问题标题】：Changing the vertical alignment of floated elements更改浮动元素的垂直对齐方式
【发布时间】：2013-07-23 00:55:15
【问题描述】：

我正在开发一个活动页面的移动版本，该页面使用 div 作为列和浮点数进行格式化。我想在桌面布局上交替活动海报的两侧，但就像现在一样，当浮动垂直堆叠时，活动海报在活动描述之后结束。我现在一直在 CSS 和检查器内部，似乎无法让它工作。我尝试从左到右切换浮点数，添加 clear:both 和 clear:left/right 并弄乱了最小和最大宽度以及列百分比无济于事。测试版网站页面的链接在这里：http://oxford.beta.st/events/。

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

【问题讨论】：

这对我来说似乎很好，海报最终居中在标题和描述上方......我不是很清楚这里的问题吗？
看起来只有当您的窗口宽度为 850 像素或更少时才会出现问题。据我了解，您希望海报始终显示在说明上方，而不是交替显示在说明上方和下方。

标签： css css-float responsive-design vertical-alignment

【解决方案1】：

问题是我注意到您正在使用.column1 和.column2，并且您交替使用一次用于描述和一次用于海报。因此，通过在描述应该在的底部添加您的“均匀”海报，它的行为应该是正常的。

这意味着海报标记最终低于应有的水平，在这种情况下，我建议使用 CSS :nth-child pseudo selectors 的不同方法，因此您的标记保持不变（意味着始终使用 .column1 作为海报) 但您可以根据元素使用 CSS 设置样式和浮动。

另一个很好的资源是found here。

已编辑：

Working jsFiddle

添加这个小提琴是为了展示如何使用第 n 个孩子来解决这个特定问题。请注意我的意思，每一行都为.column1 和.column2 执行此操作

【讨论】：

听起来正是我所需要的，但添加后：.two_columns_25_75>.column1:nth-child(even) { float: right!important; } 到 CSS，我看不到任何变化，即使在检查器中也是如此。不知道我做错了什么......我第一次使用 nth-child 所以我确定我错过了一些东西
我也切换了列布局，所以所有海报都在.column1中，所有描述都在.column2中
:nth-child 伪选择器一开始可能会变得非常棘手，但是一旦您了解了诸如索引从零开始的事实，您就可以使用“偶数或奇数”第 n 个选择器，并且很快。这里要做的事情是使用:nth-child(even) 所以当.column1 选择器我们使用“偶数”数字时，它具有某些CSS样式（这些将是对面的浮动以及不同的边距和填充以适应）所以这样一来，您就可以使所有人的标记保持不变，并且 CSS 会将其设置为一侧和另一侧。
感谢您的所有帮助@sulfureous。现在我的伪选择器在那里工作，但由于某种原因，它适用于所有 .column1 元素，而不仅仅是奇数元素（即使我在源代码中看到了第 n 个子选择器）。我快疯了。
别担心，我正在设置一个小提琴，您只需几分钟即可实现。