用float浮动两个DIV：right

Hihi，我想用DIV创建一个幻灯片下拉菜单，但遇到了一个问题，我无法弄清楚如何克服。让我们来看看下面的代码：用float浮动两个DIV：right

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>test</title> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#menu").click(function() { 
       $('#menuItem').slideDown('slow'); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div style="width: 500px; margin: 0px auto; padding: 10px;"> 
     <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;"> 
      MenuItem1<br /> 
      MenuItem2<br /> 
      MenuItem3<br /> 
      MenuItem4<br /> 
      MenuItem5<br /> 
      MenuItem6<br /> 
      MenuItem7 
     </div> 
     <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;"> 
      My Menu 
     </div> 
    </div> 

    <div style="margin: 50px 0px; padding: 0px; text-align: center;"> 
     <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;"> 
      <div style=" position: relative; z-index: 1; float: right;">Form Element</div> 
     </div> 
    </div> 
</body> 
</html>

所有我想要实现的是让我的幻灯片下拉菜单留在我的表单元素的DIV的顶部。请指教如何做到这一点。非常感谢！

来源

2011-06-10 joe kirk

快速和脏：我加入含有用于菜单的绝对定位的外，再施加top:40px到内容div到将其向下推，以补偿菜单的高度。

<div style="position:absolute;width:100%;"> 
    <div style="width: 500px; margin: 0px auto; padding: 10px; "> 
     <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;"> 
      MenuItem1<br /> 
      MenuItem2<br /> 
      MenuItem3<br /> 
      MenuItem4<br /> 
      MenuItem5<br /> 
      MenuItem6<br /> 
      MenuItem7 
     </div> 
     <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;"> 
      My Menu 
     </div> 
    </div> 
</div> 

    <div style="margin: 50px 0px; padding: 0px; text-align: center; position:relative; top:40px; "> 
     <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;"> 
      <div style=" clear:both; z-index: 1; float: right;">Form Element</div> 
     </div> 
    </div> 
</body> 
</html>

当我输入这个时，dotty已经在我之前用非常相同的方法回答了。但是，在上面的代码中，单个菜单div按照您希望的方式正确地相互浮动，就像您在问题中发布的第一个代码中那样。

可能有一些div和现在有点多余的样式元素。

编辑：我现在确实发现，在dotty的代码中的菜单的操作实际上可能是如何意图为菜单。

来源

2011-06-10 11:39:56 Trevor

感谢您的想法，添加一个绝对的外部容器为我的菜单很好的窍门！ :) – 2011-06-10 13:13:00

把#menuItem DIV的#menu DIV内部，#menuItem div的位置设置为绝对的，除去它的浮动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>test</title> 

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#menu").click(function() { 
      $('#menuItem').slideDown('slow'); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div style="width: 500px; margin: 0px auto; padding: 10px;"> 

    <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;"> 
     My Menu 

     <div id="menuItem" style="border: 1px solid blue; position: absolute; z-index: 10; display: none; cursor: pointer;"> 
      MenuItem1<br /> 
      MenuItem2<br /> 
      MenuItem3<br /> 
      MenuItem4<br /> 
      MenuItem5<br /> 
      MenuItem6<br /> 
      MenuItem7 
     </div> 

    </div> 
</div> 

<div style="margin: 50px 0px; padding: 0px; text-align: center;"> 
    <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;"> 
     <div style=" position: relative; z-index: 1; float: right;">Form Element</div> 
    </div> 
    </div> 
</body> 
</html>

来源

2011-06-10 11:26:58 dotty

非常感谢您的评论，我采用了Trev16v的建议。 :) – 2011-06-10 13:13:38

尽管在我的版本中减少标记;） – dotty 2011-06-10 13:23:05

用float浮动两个DIV：right

回答

相关问题