浮动菜单扰乱了我的浮动内容

时间:2013-09-27 14:26:37

标签: html css css-float

在我的HTML页面中,我总共有3个菜单:

  • 1左侧
  • 1在右边
  • 内容中间的<1>

左右菜单是浮动的,中间内容和菜单的边距等于菜单的中心宽度。

这很好用。但是,当我在我的内容块中插入一些其他浮动内容并使用clear: both;将其停止时,我添加的下一个内容将添加到具有最大高度的侧边菜单下方。

这是一个显示问题的简单小提琴:http://jsfiddle.net/Xy9Ry/

如您所见,other content文字显示在左侧菜单下方,而不是显示在floating content下方。

我该怎么做才能解决这个问题?

1 个答案:

答案 0 :(得分:1)

overflow: hidden;添加到.content

JSFiddle Demo

w3c Wiki article on Overflow

overflow: auto;也有效