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

时间:2015-02-26 01:23:08

标签: html css layout responsive-design css-float

浮动列表项,如果一个项比其余项长,则它将在整个UL中向下推送其他列表项。我尝试过vertical-align:topfloat:topclear:noneoverflow:hidden的不成功组合。

这是响应式内容显示的一部分,发生问题的代码可以在这个小提琴中找到。

http://jsfiddle.net/t910gv2v/

问。如果上面的空间可用时我怎么能阻止所有菜单被按下或者特别针对"奇怪的一个"并向上推?

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

与此未解决的帖子类似:2 column layout pushing other content down

1 个答案:

答案 0 :(得分:1)

看,你试图用width: 25%;放置5个元素。当然,第5个元素会掉下来!您必须使用width: 20%;来容纳所有5个元素。

我的意思是,通过使用width: 25%;,您可以象征性地将父元素划分为4个部分",当然,第5个25%宽度元素不适合

请记住,float: top;不存在:http://www.w3schools.com/cssref/pr_class_float.asp