div 没有出现在兄弟导航栏 div 下方？答案

【问题标题】：div not appearing below brother navbar div?div 没有出现在兄弟导航栏 div 下方？
【发布时间】：2016-06-03 10:08:54
【问题描述】：

我是一个业余爱好者，我不确定为什么这个 div 没有出现在导航栏 div 的下方。我引用的 div 是 #sponsorBar div。

感谢您的帮助，如果我需要添加任何其他信息，请告诉我。

body {
  background-color:black;
  margin:0;
  padding:0;
}

#navBar {
  position:fixed;
  float:left;
  background-color:white;
  text-align:center;
  height: 50px;
  width:100%;
  margin:0;
  padding:0;
  top:0;
}

#navList {
  display:inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color:white;
}

#navList li {
  float:left;
}

#navList li:nth-child(1) {
  border-left: 0;
}

#navList li:nth-child(3) {
  margin-right: 100px;
}

#navList li:nth-child(5) {
  margin-left: 100px;
}

#navList li:nth-child(7) {
  border-right: 0;
}

#navList li a {
  display:inline-block;
  font-family:'Helvetica Neue', Helvetica, sans-serif;
  font-weight:bold;
  text-decoration:none;
  color:black;
  font-size:1.2em;
  vertical-align:-17px;
  margin: 0;
  padding: 0;
  height:50px;
}

#navList li:hover {
  background-color: black;
}

#navList li:hover a {
  color:white;
}

.navImage {
  float:left;
  display:block;
  margin:0;
  padding:0;
  max-height: 50px;
}
.navImage:hover {
  background-color: white;
}

.navListItem_left {
  border-left: 1px solid black;
  height: 50px;
  width:100px;
}

.navListItem_right {
  border-right: 1px solid black;
  height: 50px;
  width:100px;
}

#sponsorBar {
  clear:left;
  position:relative;
  display:block;
  background-color:white;
  height:100px;
  width:80%;
  margin:100px;
}

<div id="navBar">
  <ul id="navList" class="navListItem">
    <li class="navListItem_left">
      <a href="index.html">Home</a>
    </li>
    <li class="navListItem_left">
      <a href="teams.html">Teams</a>
    </li>
    <li class="navListItem_left">
      <a href="articles.html">Articles</a>
    </li>
    <li>
      <a href="/index.html">
        <img src="img/simplify_black_transparent_500x500.gif" class="navImage"/>
      </a>
    </li>
    <li class="navListItem_right">
      <a href="menu5.html">Menu4</a>
    </li>
    <li class="navListItem_right">
      <a href="about.html">About Us</a>
    </li>
    <li class="navListItem_right">
      <a href="partners.html">Partners</a>
    </li>
  </ul>
</div>
<!--Sponsor Div-->
<div id="sponsorBar">
  <p style="color:red;">TEST</p>
</div>

https://jsfiddle.net/abelgoodwin1988/a6tthq9k/

【问题讨论】：

移除位置：从 #navBar 固定。
让我检查一下 chrome。在 FF 中它工作正常。
在 chrome 中也有同样的结果。看起来不错。我正在使用最新版本的 chrome。即 50.0.2
这个截图。 i.stack.imgur.com/ZtRJh.png 这是版本截图。 i.stack.imgur.com/9hjBh.png
可能是但是。它也应该在该版本中工作。因为。没有什么比不工作更重要的了。尝试清除缓存。要么。重新安装 chrome。

标签： html css css-float divider

【解决方案1】：

哇！那太奇怪了！由于某种原因，JSFiddle 不喜欢 id “sponsorBar”。我不知道为什么。当我将 id（和相应的 CSS 代码）更改为 sB 时，它没有问题！！

https://jsfiddle.net/a6tthq9k/3/ HTML：

<body>
    <!--Navigation Div-->
    <div id="navBar">
        <ul id="navList" class="navListItem">
            <li class="navListItem_left">
                <a href="index.html">Home</a>
            </li>
            <li class="navListItem_left">
                <a href="teams.html">Teams</a>
            </li>
            <li class="navListItem_left">
                <a href="articles.html">Articles</a>
            </li>
            <li>
                <a href="/index.html">
                    <img src="img/simplify_black_transparent_500x500.gif" class="navImage"/>
                </a>
            </li>
            <li class="navListItem_right">
                <a href="menu5.html">Menu4</a>
            </li>
            <li class="navListItem_right">
                <a href="about.html">About Us</a>
            </li>
            <li class="navListItem_right">
                <a href="partners.html">Partners</a>
            </li>
        </ul>
    </div>
    <!--Sponsor Div-->
    <div id="sB">
        <p style="color:red;">TEST</p>
    </div>
    <!--Content Div-->
</body>

CSS：

 body {
        background-color:black;
        margin:0;
        padding:0;
    }

    #navBar {
        position:fixed;
        float:left;

        background-color:white;
        text-align:center;

        height: 50px;
        width:100%;

        margin:0;
        padding:0;

        top:0;
    }

    #navList {
        display:inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color:white;
    }
    #navList li {
        float:left;
    }
    #navList li:nth-child(1) {
        border-left: 0;
    }
    #navList li:nth-child(3) {
        margin-right: 100px;
    }
    #navList li:nth-child(5) {
        margin-left: 100px;
    }
    #navList li:nth-child(7) {
        border-right: 0;
    }
    #navList li a {
        display:inline-block;
        font-family:'Helvetica Neue', Helvetica, sans-serif;
        font-weight:bold;
        text-decoration:none;
        color:black;
        font-size:1.2em;

        vertical-align:-17px;

        margin: 0;
        padding: 0;

        height:50px;
    }

    #navList li:hover {
        background-color: black;
    }
    #navList li:hover a {
        color:white;
    }

    .navImage {
        float:left;
        display:block;
        margin:0;
        padding:0;

        max-height: 50px;
    }
    .navImage:hover {
        background-color: white;
    }

    .navListItem_left {
        border-left: 1px solid black;
        height: 50px;
        width:100px;

    }

    .navListItem_right {
        border-right: 1px solid black;
        height: 50px;
        width:100px;
    }

    #sB {
        clear:left;
        position:relative;
        display:block;

        background-color:white;

        height:100px;
        width:80%;

        margin:100px;
    }

【讨论】：

哇...这里也一样.. 不只是 JSFiddle，它是 chrome.. wtffff？这是一些奇怪的嘶嘶声 Keith.. 奇怪的嘶嘶声......
这是广告拦截！我刚刚检查了一下，是的！果然，当我关闭它时它工作正常！。