我正在开发事件页面的移动版本，该页面使用 div 作为列并使用 float 来设置格式。我想在桌面布局上交替事件海报的两侧，但就像现在一样，当花车垂直堆叠时，事件海报在事件描述之后结束。我现在一直在 CSS 和检查器中，似乎无法让它工作。我尝试将 float 从左切换到右，添加 clear:both 和 clear:left/right 并弄乱了最小和最大宽度以及列百分比，但无济于事。测试站点页面的链接在这里:http://oxford.beta.st/events/ .
我觉得应该有一个简单的解决方案...非常感谢任何想法。
最佳答案
问题是我注意到您正在使用 .column1 和 .column2 并且您交替使用一次用于描述，一次用于海报。因此，通过在底部应该描述的位置添加“偶数”海报，它的行为就应该如此。
这意味着海报标记最终低于应有的水平，在这种情况下，我建议使用 CSS :nth-child 的不同方法 pseudo selectors所以你的标记保持不变(意味着始终使用 .column1 作为海报)但是你可以使用 CSS 来根据元素设置样式和 float 。
关于如何使用这个强大的伪选择器的另一个充满示例的好资源是 found here .
已编辑:
添加这个 fiddle 是为了展示如何使用第 n 个 child 来解决这个特定问题。请注意我的意思，每一行都对 .column1 和 .column2
关于css - 更改 float 元素的垂直对齐方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17818923/