无法清除响应式布局中的浮动，冗长的内容框将其他人推倒

Unable to clear floats in responsive layout, lengthy content box pushes others down

浮动列表项，如果其中一项比其余项长，它将在整个 UL 中将其他列表项向下推。我尝试了 vertical-align:top、float:top、clear:none 和 overflow:hidden 的不成功组合。

这是响应式内容显示的一部分，出现问题的代码可以在这个fiddle.

中找到

Q. 当上述 space 可用时，如何防止所有菜单被按下，或者专门针对 "odd one out" 并按下向上吗？

代码结构 (ul > li > div) 是我必须使用的，除非对问题负责，否则应该是相同的

类似于这个未解决的post：2 column layout pushing other content down

看，您正试图用 width: 25%; 放置 5 个元素。当然，5F元素会倒下！您必须使用 width: 20%; 来匹配所有 5 个元素。

我的意思是，通过使用 width: 25%; 你比喻性地 "dividing the parent element in 4 parts"，所以当然，第 5 个 25% 宽度的元素将不适合。