Question

对不起这个奇怪的标题，我不知道还有什么可以称之为。所以这是我的问题。我从头开始创建一个新网站，我的HTML不是很流利，但是我做了一个主要的div和一个顶级菜单div，当我测试它时，它很好。然后我添加了一个侧栏，当我测试它时，菜单一直在左边，所以当我试图修复它时，主div与菜单一起发送到页面中间，远离侧边栏。这是我的css代码：

body
{
  font: "Trebuchet MS", Verdana, sans-serif;
  background-image:url("http://www.wallchan.com/images/mediums/2000.jpg");
  color: #696969;
}

#main
{
  position: absolute;
  left:105px;
  padding: 30px;
  background-color:     #ADFF2F;
  border-radius: 4px 4px 4px 4px;
}

h1
{
  font: Georgia, serif;
  border-bottom: 3px solid #cc9900;
  color: #996600;
}

#sidebar
{
  position:absolute;
  left:0; top:92px; bottom: 0;
  width: 90px;
  padding: 10px;
  background-color:  #48D1CC;
  border-radius: 10px 10px 10px 10px;
}

#menu
{
  padding: 0px;
  position: relative;
  margin: 0;
}

#menu li
{
  display: inline;
}

#menu li a
{
  background-color:     #87CEFA;
  padding: 10px 20px;
  text-decoration: none;
  line-height: 2.8em;
  color: #034af3;
  border-radius: 4px 4px 0 0;
}

#menu li a:hover
{
  background-color:     #7CFC00;
}

这是我的主要HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>PHP Demo</title>
    <link href="site.css" rel="stylesheet">
  </head>
  <body>
    <div id="sidebar">
      <p>Test</p>
    </div>
    <div id="menu">
      <?php include("header.php"); ?>
      <div id="main">
        <h1>Welcome to the Pantheon Inc. website! </h1>
        <h2>We strive to make your life easier!</h2>
        <?php include("footer.php"); ?>
      </div>
  </body>
</html>

这是我的标题代码：

<ul id="menu">
<li><a href="index.php">Home</a></li>
<li><a href="projects.php">Projects</a></li>
<li><a href="about.php">About</a></li>
</ul>

P.S。另外，我想知道是否有办法将我的菜单变成下拉菜单？就像当你将鼠标悬停在它上面时，可能会有一些jquery动画使其下拉其子组件。谢谢！

Answer 1

在这种情况下，您不应该使用position: absolute 浮点数会更好 - flexbox（如果您定位的浏览器支持它）最好。

HTML

<ul id="menu">
    <li><a href="index.php">Home</a></li>
    <li><a href="projects.php">Projects</a></li>
    <li><a href="about.php">About</a></li>
</ul>

<div id="sidebar">
    <p>Test</p>
</div>

<div id="main">
    <h1>Welcome to the Pantheon Inc. website! </h1>
    <h2>We strive to make your life easier!</h2>
</div>

<footer>footer here</footer>

CSS

#menu
{
  padding: 0px;
  overflow: hidden;
  margin: 0;
}

#menu li
{
  display: block;
  float: left;
  margin-right: 5px;
}

#main
{
  float: left;
  padding: 30px;
  background-color:     #ADFF2F;
  border-radius: 4px 4px 4px 4px;
  margin-left: 5px;
}

#sidebar
{
  float: left;
  width: 90px;
  padding: 10px;
  background-color:  #48D1CC;
  border-radius: 10px 10px 10px 10px;
}

footer { clear: both; }

其他问题：

没有<div id="menu">结束标记，您需要添加它
您有两个相同的ID，menu。你需要摆脱一个。

Fiddle

Answer 2

说实话，我还没有看过你的整个帖子，但这似乎是一个位置问题。当你在一个元素上添加绝对位置时，它将失去页面上的正常流量，以恢复你可以在主容器上添加的流量。

overflow:hidden;

你也可以添加

<div style="clear:both"></div>

你会得到相同的结果

What is the meaning of the terms "Normal Flow" and "Out of Flow", in terms of HTML, CSS and Browser?

http://www.w3schools.com/cssref/pr_class_clear.asp

菜单div远离主要div

2 个答案:

HTML

CSS