如果在breadcrumbsContainer上检查元素(参见jsFiddle),您可以看到它的左边缘一直在浏览器窗口的左边缘,但我预计它将位于侧边栏的右边缘.
我看到还有其他几个类似的问题,但我还没有找到一个有相同问题或答案的问题.
这是HTML:
最佳答案
我检查了你的代码,这是我的解决方案:
你有浮动后你不能让下一个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: