Question

<div id="header">
 <>.....<>
  <div id="Menu" style="background-color: #662900; font-size: 20px; height: auto; width: 100%; word-spacing: 50px; position: absolute; float: left">

我希望div id-menu显示在标题div的正下方。

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
#header {
    display: block;
}
</style>
</head>
<body>
    <div id="header">
    Header</div>
  <div id="Menu" style="background-color: #662900; font-size: 20px; height: auto; width: 100%; word-spacing: 50px; position: absolute; float: left"> Menu
</div>
</body>
</html>

<强> Demo Here

Answer 2

您可以在css中添加margin: 0以显示在下方。在您的代码中，您忘记关闭标题div，因此div菜单位于标题div

内

Answer 3

请参阅此 DEMO 。

由于您有absolute菜单，我的建议是使用relative标题。

<强> HTML

 <div id="header">
     <>.....<>
    <div id="Menu" style=""> 
          Menu 
    </div>

<强> CSS

#header{position:relative}
#Menu{background-color: #662900; font-size: 20px; height: auto; width: 100%; word-spacing: 50px; position: absolute; float: left}

Answer 4

#menu{
position: absolute;
right:0;
}

Answer 5

当您为菜单div提供绝对位置时，您需要使用

指定该位置

top: _enter here your header height
left:0px;

如何使div在css中显示在另一个下方

5 个答案: