我有一个 .left
向左浮动的 div 和 .right
向右浮动的 div,它们带有 .navBarWrapper
div .我将 clear:both
应用于 .searchBar
,但 searchBar
仍显示在页面的左上角,如蓝色矩形所示以下。如何解决这个问题?
.navBarWrapper {
position: fixed;
z-index: 1;
width: 100%;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.bar {
height: 8.02%;
overflow: auto;
}
.searchBar {
clear: both;
}
<div class="navBarWrapper">
<div class="top bar">
<ul class="left float_left">
<li class="title">Photo Albums</li>
</ul>
<ul class="right float_right">
<li class="buttons">
<a class="iconLink" href=""><img class="iconNotHover" src="images/uploadImage.png" alt="uploadImage" width="40" align="middle" /></a>
</li>
</ul>
</div>
<div class="bottom bar">
<ul>
<li><a href="">Select</a></li>
<li><a href=""><span class = "iconTitle">New Album </span><img class = "icons" src = "images/addAlbum.png" alt = "addAlbum" width="30" align = "right"/></a></li>
</ul>
</div>
</div>
<div class="searchBar">
<img src="images/search.png" alt="search" width="40">
</div>
最佳答案
只需尝试从 .navBarWrapper
中删除 position: fixed;
.searchBar
相对于正文,因为 .navBarWrapper
的位置是固定的。如果您将这两个类都作为相对位置,它应该可以工作,为此只需在 .navBarWrapper
上省略位置。您也不需要将 clear: both
放在 .searchBar
上。仅当 .searchBar
div 也在 navBarWrapper
div 中时,清除两者才有意义。
你的最终代码应该是
.navBarWrapper {
z-index: 1;
width: 100%;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.bar {
height: 8.02%;
overflow: auto;
}
.searchBar {
}
关于html - 清除 :both not working when trying to place a div below floated divs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42755805/