为什么我的DIV跌落页面

Question

我有一个垂直菜单，当我向页面添加内容时，添加的内容就在菜单下方。我想防止内容掉落。希望得到专家的帮助。

在给定的示例中，我希望演示与菜单位于同一行。

 p, ul, li, div, nav { padding:0; margin:0; } body { font-family:Calibri; } #menu { overflow: auto; position:relative; z-index:2; } .parent-menu { background-color: #0c8fff; width:200px; } #menu ul { list-style-type:none; } #menu ul li a { padding:10px 15px; display:block; color:#fff; text-decoration:none; } #menu ul li a:hover { background-color:#007ee9; } #menu ul li:hover > ul { left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; } #menu ul li > ul { position: absolute; background-color: #333; top: 0; left: -200px; min-width: 200px; z-index: -1; height: 100%; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; } #menu ul li > ul li a:hover { background-color:#2e2e2e; } .content { padding: 12px 12px 12px 12px; font-size: 0.8em; line-height: 1.65em; border-left: 1px solid #bdc1a3; border-right: 1px solid #bdc1a3; background-color:#ffffff } #dataDiv{ float: left;border:1px solid #bdc1a3;background-color:#f3f5dc; } 

 <div class="content"> <div id="menu" style="overflow:hidden"> <ul class="parent-menu"> <li><a href='#'><span>Menu1</span></a> <ul> <li><a href='#'><span>SubMenu1</span></a></li> <li><a href='#'><span>SubMenu2</span></a></li> </ul> </li> <li><a href='#'><span>LOG OUT</span></a></li> </ul> </div> <div id="dataDiv" style="overflow:hidden"> <table> <tr> <td style="background-color: #0C9FFF"> &nbsp;Demo </td> </tr> </table> </div> 

Answer 1

您的菜单位于div ，它是一个块级元素，因此它将占据其父元素的整个宽度，并将以下内容压入其下方。

实现您要执行的操作的一种方法是将float: left在#menu 。

Answer 2

使用样式属性float 。 https://jsfiddle.net/4g5tLekm/7/

将<div id="menu" style="overflow:hidden">为<div id="menu" style="overflow:hidden;float:left">