大佬教程收集整理的这篇文章主要介绍了jquery – 为什么浮动div之后的div与浮动div重叠？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
如果在breadcrumbsContainer上检查元素(参见jsFiddle),您可以看到它的左边缘一直在浏览器窗口的左边缘,但我预计它将位于侧边栏的右边缘.
我看到还有其他几个类似的问题,但我还没有找到一个有相同问题或答案的问题.
这是HTML：
<div>
<div id="sidebar">
<div class="menuItem">Users</div>
<div class="menuItem">Settings</div>
</div>
<div class="breadcrumbsContainer">
Breadcrumbs go here
</div>
<div class="main">
Main content goes here
</div>
</div>
这是CSS：
#sidebar {
float: left;
width: 200px;
}
.menuItem {
height: 60px;
border-top: 1px solid white;
background: lightBlue;
}
.breadcrumbsContainer {
height: 24px;
background: lightGrey;
}
.main {
background: #f5f5f5;
overflow: scroll;
}
的jsfiddle
笔记
>以下.main div按我的预期定位.
>在简化我的jsfiddle的情况时,我发现删除溢出：从.main div滚动导致它的行为类似于breadcrumbsContainer.
>相反,添加overflow：scroll(overflow：hidden)到breadcrumbsContainer会导致其边界框调整到我预期的位置.
问题
>为什么breadcrumbsContainer的边界框不能从我期望的位置开始,但breadcrumbsContainer中包含的文本几乎就是我期望的那样？
>设置这样的布局的“正确方法”是什么,以便breadcrumbsContainer和.main div不与侧边栏重叠,还会在浏览器窗口调整大小时调整大小？
我可以通过绝对定位和jQuery resize()事件轻松完成,但似乎没有它可能.
谢谢.
你有浮动后你不能让下一个div：左规则没有浮动规则.例如,你的下一个div类是breadCrumbsContainer.它没有浮动规则.
所以,你需要为.breadCrumbsContainer和main定义float：left.但是div的宽度存在问题,它将适合其内容.
我建议您先添加布局规则.所以它看起来像这样：
#sidebar {
float: left;
width: 20%;
}
.menuItem {
height: 60px;
border-top: 1px solid white;
background: lightBlue;
}
.breadcrumbsContainer {
float: left;
width: 80%;
height: 24px;
background: lightGrey;
}
.main {
float: left;
width: 80%;
background: #f5f5f5;
overflow: scroll;
}
否则,您还可以将侧边栏位置设置为绝对位置,并且可以创建一个div来包装主要内容
CSS：
#sidebar {
position: absolute;
width: 200px;
}
.main-container{
position: relative;
left: 200px;
}
.menuItem {
height: 60px;
border-top: 1px solid white;
background: lightBlue;
}
.breadcrumbsContainer {
height: 24px;
background: lightGrey;
}
.main {
background: #f5f5f5;
overflow: scroll;
}
HTML：
<div>
<div id="sidebar">
<div class="menuItem">Users</div>
<div class="menuItem">Settings</div>
</div>
<div class="main-container">
<div class="breadcrumbsContainer">
Breadcrumbs go here
</div>
<div class="main">
Main content goes here
</div>
</div>
</div>
我们非常推荐查看bootstrap框架
以上是大佬教程为你收集整理的jquery – 为什么浮动div之后的div与浮动div重叠？全部内容，希望文章能够帮你解决jquery – 为什么浮动div之后的div与浮动div重叠？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。