0

目前，我正在研究导航，我遇到了这个问题：

导航的内容向左浮动。当我尝试为导航本身设置背景颜色时，它不起作用。看这个例子：

http://cssdeck.com/labs/qknohqxe

当 float:left 被移除时，背景颜色变得可见，但是，导航的“表单”被破坏。

我很确定我错过了一个重要的点，因为我试图达到这个简单的点，在这个点上，形式和背景颜色都可以按照我的意愿保留。

我的猜测是，浮动内容和载体的大小（在我的例子中是#nav）之间存在关系。

需要针对此问题的建议/解决方法。

4

5 回答 5

2

将此添加到.group：

overflow:auto;

而已。

还有另一种解决方案：clear:both;在所有浮动 div 之后添加一个元素。但它有点脏：

<div class="container">
    <div class="floating div"></div>
    <div class="floating div"></div>
    <div class="floating div"></div>
    <div style="clear:both;"></div>
</div>

当您使用浮动 div 时，它总是会发生。该容器不关心浮动元素，因此它就像一个空容器，除非您使用上述解决方案之一。

于 2013-02-08T12:42:24.133 回答
1

在父容器（.group在您的情况下）上，添加overflow: auto或设置固定高度。

发生这种情况是因为浮动元素和绝对定位元素默认情况下会从文档流中排除，因此在定位以下元素时会被忽略。

于 2013-02-08T12:43:18.387 回答
0

为您的.group.

.group{
    height: 300px;
    background-color: blue;
}

当您浮动对象时，它会将其从文档流中取出。这意味着父对象与子元素的高度无关。

通过设置高度，您将迫使容器下降。

或者，您可以向容器添加溢出以.group强制它查找高度。

.group{
    overflow: hidden;
    background-color: blue;
}
于 2013-02-08T12:39:14.463 回答
0

这是有效的 CSS 声明。

.group{
    background-color: blue;
    float: left;
    width: 200px;
}

您需要了解嵌套元素的浮动和定位。

于 2013-02-08T12:47:02.100 回答
0

只需添加一个明确的两者；到一个额外的元素：

<div id="nav">
    <div class="group">
        <div class="button">Button1</div>
        <div class="button">Button2</div>
        <div class="button small">Button3</div>
        <div class="button small">Button4</div>
        <div class="button">Button5</div>   
        <br class="clear" />
    </div>
</div>


#nav{
    width: 240px;
}

.button{
    float:left;
    border-radius: 20px;
    width: 200px;
    height: 50px;
    margin-top: 10px;
    background-color: red;
    text-align: center;
    line-height: 50px;
}

.group{
    background-color: blue;
}

.small{
    width: 100px;
}
.clear
{
    clear: both;
}
于 2013-02-08T12:47:24.143 回答