Question

我有一个浮动的左侧边栏布局，右侧有面包屑和主要内容区域。

如果在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

http://jsfiddle.net/LCdwV/2/

备注

以下.main div按我的预期定位。
在简化jsfiddle的情况的同时，我发现删除溢出：从.main div滚动导致它的行为与breadcrumbsContainer一样。
相反，将overflow：scroll（overflow：hidden）添加到breadcrumbsContainer会导致其边界框调整到我预期的位置。

问题

为什么breadcrumbsContainer的边界框不能从我期望的位置开始，但是breadcrumbsContainer中包含的文本几乎就是我期望的那样？
设置这样的布局的“正确方法”是什么，以便breadcrumbsContainer和.main div不与侧边栏重叠，还会在浏览器窗口调整大小时调整大小？

我可以通过绝对定位和jQuery resize（）事件轻松完成，但似乎没有它就可以实现。

感谢。

Answer 1

float从正常流中删除一个元素，这意味着相邻元素的位置就好像浮点数不存在一样（这就是.breadcrumb-container重叠的原因..它忽略了它的兄弟的框）。

如果元素具有内联显示，则不是这种情况。

由于文本是内联的，因此它尊重此浮动的存在，因此与其右边缘齐平 - 这是预期的行为，因为文本旨在环绕浮动元素。

Answer 2

因为它仍然固定或定位在窗口的左边缘，但div本身或内容直到侧边栏后才开始。当您检查它时，滚动行为是区分两者的，因为滚动条会强制文档说潜水不会一直向左倾斜。基本上你得到了正确的功能，你刚刚达到了一个奇怪的css

Answer 3

我检查了你的代码，这是我的解决方案：

你有浮动之后你不能让下一个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框架

为什么浮动div之后的div与浮动div重叠？

的jsfiddle

备注

问题

3 个答案: