Question

我的页面上有两个div。第一个是标题div，其中包含徽标图像和搜索输入。第二个div将包含一个水平行，我的所有导航链接将在。

问题是由于某种原因第二个div确实位于我的第一个div之上，占据了徽标图像和搜索框之间的所有空间？

以下是两个div

    <div id="container">

        <div id="logo">
            <img src="HeaderLogo.jpg" alt="logo">
        </div>

        <div id="searchboxcontainer">
            <form action="search.php" method="post">
                <input type="text" name="searchterm" id="searchbox">
                <input type="submit" name="search" value="Search" id="searchsubmit">
            </form>
        </div>

    </div>


    <div id="navbar">   

    </div>

这是我的CSS：

  #logo {

width:30%;
float:left;
margin-left:50px;   
} 

#searchboxcontainer {

background-color:#A3E0FF;
width:30%;
float:right;
margin-right:50px;
margin-top:60px;
padding:15px;
}

#searchsubmit {

background-color:#19A3D1;
}

#navbar {

width:100%;
background-color:#CACABC;
    height:60px;
}

Answer 1

申请#navbar{clear:both }可以解决您的问题

旁注：如果您希望父级，即#container覆盖浮动div的高度，您可以申请#container{overflow:auto;}

请检查完整代码，如下所示http://jsfiddle.net/2Mh9y/

希望它有所帮助！

Answer 2

检查这个小提琴，添加

border-box and overflow auto

删除了一些边距，并添加了一些填充。不确定这是不是你想要的 http://jsfiddle.net/WSaj8/12/

水平div相互重叠？

2 个答案: