用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

回答

相關問題