广告 div 不适合容器 div答案

【问题标题】：advertisement div won't fit in container div广告 div 不适合容器 div
【发布时间】：2015-12-31 14:58:31
【问题描述】：

我正在为我所在的分支机构建立自己的网站，我偶然发现了一个我无法解决的问题。

我用 HTML/CSS 编写了这段代码，我想要的是我的广告 div 可以放在我的容器 div 内。

CSS：

#body {
  font-family: verdana;
  background-color: #4C4C4C;
}
#container {
  background-color: #FFFFFF;
  height: 900px;
  width: 1250px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  position: relative;
}
#header {
  background-image: url("company_banner.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  vertical-align: middle;
  width: 1250px;
  height: 225px;
  position: relative;
}
#streep {
  background-color: #FC001E;
  margin-top: 0px;
  width: 1250px;
  height: 1px;
  position: relative;
}
#nav {
  margin-top: 0px;
  margin-left: 0px;
  width: 180px;
  height: 220px;
  position: absolute;
}
#advertisement{
  background-image: url("advertisement.jpg"); 
  background-position: top; 
  width: 200px; 
  height: 180px; 
  margin-top: opx; 
  position: relative
}
#content {
  margin-top: 0px;
  margin-left: 225px;
  width: 1025px;
  height: 625px;
  position: relative;
}
#footer {
  background-color: #FC001E;
  margin-bottom: 0px;
  width: 1250px;
  height: 50px;
  position: relative;
}
h1 {
  position: absolute;
  top: 65px;
  left: 25px;
}
ul#menu {
  padding: 10px;
  list-style-type: none;
  margin-top: 0px;
  border-radius: 4px 4px 4px 4px;
}
ul#menu li {
  padding: 10px;
}
ul#menu li a {
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: : 4px 4px 4px 4px;
  text-decoration: none;
}
ul#menu li a:hover {
  background-color: #FC001E;
}

HTML：

<!DOCTYPE html>
<html>

<head>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>Nijhuis PC</title>
</head>

<body id=body>
  <div id=container>
    <div id=header>
      <h1>
        company name
      </h1>
    </div>

    <div id=streep></div>

    <div id=nav>
      <ul id=menu>
        <li><a href=index.html>Home</a>
        </li>
        <br>
        <li><a href=services.html>services</a>
        </li>
        <br>
        <li><a href=whoweare.html>who we are</a>
        </li>
        <br>
        <li><a href=contact.html>Contact</a>
        </li>
        <br>
      </ul>
    </div>

    <div id=content>
      welcom to the company's main website
      <br>
      <br>
    </div>

    <div id=advertisement></div>
    <div id=footer></div>
  </div>

</body>
</html>

我想要我的广告 div 在导航 div 下。

你们能帮帮我吗？

【问题讨论】：

我没有看到你的广告 div。
哦，废话，抱歉我把它临时删除了。因为它不起作用，但我的广告 div 具有以下属性： background-image: url("advertisement.jpg");背景位置：顶部；宽度：200px；高度：180px；边距顶部：opx；位置：相对；

标签： html css ads

【解决方案1】：

另一种方法是将其放在 UL 之后的#nav 中。

【讨论】：

我刚刚尝试过，不幸的是它没有帮助，但感谢您至少与我一起思考。
你能告诉我发生了什么吗？当我在本地运行代码时，它似乎位于导航菜单下方。
我刚刚发现我的错误，我确实更改了 CSS 样式表中的顺序，但我没有更改 HTML 代码中的顺序 :,D