1

我有一个奇怪的情况。我的页面上有两个面板。侧边菜单和主要内容区域。

在那个主要内容区域我有一个div和里面div我浮动另外两个divs。一个在左边，另一个在右边。然后我最后clear都 div ，但是容器div和我的侧面菜单一样高。但它们不是嵌套的，所以我不明白为什么以及如何发生这种情况......

这是一个演示：

http://jsfiddle.net/9duUt/1/

如果您删除两个浮动 DIV 和清除浮动的 DIV，那么您将看到容器 div 具有其正常大小。

为什么当我浮动 div 时会发生这种情况？

那个小提琴的源代码

<div class="sidemenu">
    aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
    aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
</div>

<div class="main-content">
    <div class="top-bar">
        <div class="pull-left">
            <h1><span class="glyphicon glyphicon-th large"></span> Test</h1>
            <h5>Sub title</h5>
        </div>
        <div class="pull-right">
        CHARTS
        </div>
        <div class="fc"></div>
    </div>
</div>

.main-content {
    background: linear-gradient(to bottom, #FCFCFC 0%, #E2E2E2 18%, #EAEAEA 100%) repeat scroll 0 0 transparent;
    height: 100%;
    margin-left: 200px;
    position: relative;
}
.top-bar {
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

h1 {
    font-size: 28px;
}

.fc {
    clear: both;
}

.sidemenu {
    background: none repeat scroll 0 0 #11161A;
    float: left;
    min-width: 200px;
    position: relative;
}
4

3 回答 3

1

这是因为.fcclear 类也在清除你的侧边栏，它也恰好是向左浮动的——尽管你.sidebar没有嵌套在.main-content其中（因为这就是clear属性的工作方式）——删除.fc标记并应用overflow: hidden;到.top-bar（它提供了一个新的块格式化上下文对于它的浮动后代）会给你你可能期望的行为。您还可以摆脱不必要的加价。

.top-bar {
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    padding: 10px 15px;
}

http://jsfiddle.net/9duUt/4/

2.1 Specboth中值的定义：

两个都

要求框的上边框低于源文档中较早元素产生的任何右浮动和左浮动框的底部外边缘。

于 2013-08-16T20:05:56.580 回答
0

所以，看起来你的主要内容可能只是向左浮动，没有边距，以解决这个问题。像这样。

.main-content {
    background: linear-gradient(to bottom, #FCFCFC 0%, #E2E2E2 18%, #EAEAEA 100%) repeat scroll 0 0 transparent;
    height: 100%;
    margin-left: 0;
    float: left;
  }

你可以给它一个特定的宽度来修复它。

于 2013-08-16T20:01:31.813 回答
0

是的，问题出在fc类中。看起来它正在清除侧面菜单的浮动并且它的高度低于它。这就是你的主要内容增加的原因。无论如何，我认为你应该保留空地，因为这可能会在未来搞砸很多事情。只需添加float: left; 到main-content并删除margin-left。之后您必须解决的另一个问题是main-content的宽度。我猜你应该放一些静态值。这是您的 jsfiddle 与我的更改分叉：http: //jsfiddle.net/krasimir/pxgrt/2/

.main-content {
    background: linear-gradient(to bottom, #FCFCFC 0%, #E2E2E2 18%, #EAEAEA 100%) repeat scroll 0 0 transparent;
    height: 100%;
    width: 300px;
    position: relative;
    float: left;
}
于 2013-08-16T20:13:38.270 回答