浮动菜单干扰了我的浮动内容 [英] Floating menus disturbing my floating content

问题描述

在我的HTML页面中，我总共有3个菜单：

In my HTML page I have a total of 3 menus :

• 左侧有1个


• 1右边


• 1位于内容上方的中间

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

The left and right menus are floating, and the middle content and menu have a margin equals to the width of the menus to center it.

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

This is working fine. However, when I insert some other floating content in my content block and I stop it with clear: both;, the next content I add is added below the side menu with the largest height.

这里是显示问题的简单提琴： http ：//jsfiddle.net/Xy9Ry/

Here is a simple fiddle that shows the issue : http://jsfiddle.net/Xy9Ry/

如您所见，其他内容文本显示在左侧菜单下方，而不是显示在浮动内容下方。

As you can see, the other content text is displayed below the left menu instead of being displayed just below the floating content.

我该怎么办这个问题吗？

What can I do to solve this problem ?

推荐答案

将 overflow：隐藏； 添加到 .content

JSFiddle演示

w3c有关溢出的Wiki文章

overflow：自动； 也可以

这篇关于浮动菜单干扰了我的浮动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！