Question

对于我的生活，我不明白为什么我的“div”不会缠绕在标题上......我已经关闭了它，没有指定高度......

到目前为止，我搜索过其他帖子并没有解决方案。是否存在我忽视的冲突？

这是html：

<div id="navcontainer">
    <div id="siteLogo"> <a href="index.html"><img src="images/some image in a folder"/></a>        

    <div id="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
            <li><a href="calendar.html">Calendar</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    </div>
 </div>

CSS：

#menu li a:hover { 
    color: #ff9900;
    border-bottom: 4px solid #ff9900;
}

#siteLogo img{
    height:auto;
    width: 220px;
}

#menu {
font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
font-size: 16px;
color: #c0c0c0;
    }

#outer {
    width: 960px;
    margin:0 auto;
}

#wraper {
    width: 900px;
    margin:0 auto;
}

#navcontainer {
    width: 900px;
    margin: 0 auto;
    border-bottom: thick 1px #ffppoo;
}

#siteLogo {
    float: left;
    margin-top: auto;
}

#menu {
    float: right;
    margin-top: auto;
}

#menu ul li {
    display:inline;
}

#menu ul {
    margin-top: 50px;
    text-align: center;
}

#menu ul li a {
    padding:0 0 0 20px;
}

Answer 1

略微更改语法并包含/清除float s：

#navcontainer {
  width: 900px;
  margin: 0 auto;
  border-bottom: solid 1px #000;
  overflow: hidden;
}

http://jsfiddle.net/xSfrb/

Answer 2

花车可能会杀了你。尝试添加最后一个

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

关闭navContainer之前

Answer 3

子元素浮动在非浮动父元素中，导致所谓的零高度容器问题，并且有多个解决方案。

你可以像David Randall建议的那样使用溢出

你可以使用一个空的清晰：两个div，就像Federico Jacobi建议的那样

另一个解决方案是'Clearfix'，它使用伪内容元素。有关clearfix

的更多信息，请参阅此相关主题What is a clearfix?

编辑：有关问题的更多背景信息http://complexspiral.com/publications/containing-floats/

无法让div包裹我的标题。谁能明白为什么？

3 个答案: