0

有时，HTML/CSS 只是让我发疯；（……希望有人能解释这种行为，也许可以解决它。

请参阅下面的 HTML/CSS 或此示例JSFiddle

所以我正在做的是有一个 header 和 body div，里面都有浮动 div，并使用 clear: both; 所以容器 div 跨越了浮动的内部 div。在我的真实代码中，我使用了一个更复杂的 clearfix 类，但问题是一样的。

身体有一个前景颜色蓝色。对于 header-div，我设置了 WHITE 的前景。让我抓狂的是，前景色也被应用于 body-div，即使它不包含在 header-div 中。这怎么可能发生？

在我的真实代码中，我什至有一个问题，当我明确地将 body-div 的前景设置为蓝色时，header-div 中的颜色也会切换为蓝色。我无法用这个 JSFiddle 重现它，但如果我理解这个问题，我可以在这里重现这个示例代码，也许我也理解另一个问题:)

HTML：

<div>
    <div id="head">
        <div class="headleft">
             <h1>that's my header, baby</h1>
        </div>
        <div class="headright">
            <p>righty right</p>
        </div>
        <div style="clear: both" />
    </div>
    <div id="body">
        <div class="feature">
             <h1>feature 1</h1>
        </div>
        <div class="feature">
             <h1>feature2</h1>
        </div>
        <div style="clear: both;" />
    </div>
</div>

CSS：

body {
    color: blue;
}
div#head {
    background-color: gray;
    width: 400px;
    color: white;
}
div#body {
    background-color: lightgray;
}
.headleft {
    float: left;
}
.headright {
    float: right;
}

.feature
{
    float: left;
    margin-right: 10px;
}

感谢您对理解此问题的任何帮助！

编辑 抱歉，通过编辑粘贴的代码，我弄乱了示例并删除了一个关闭的 DIV。我现在纠正了这个问题，问题不是缺少关闭 DIV。

4

3 回答 3

2

您忘记了 head div 上的结束标签。 http://jsfiddle.net/UHXr6/2/

<div>
    <div id="head">
        <div class="headleft">
             <h1>that's my header, baby</h1>
        </div>
        <div class="headright">
            <p>righty right</p>
        </div>
        <div style="clear: both" /></div>
    </div>
    <div id="body">
        <div class="feature">
             <h1>feature 1</h1>
        </div>
        <div class="feature">
             <h1>feature2</h1>
        </div>
        <div style="clear: both;" />
    </div>
</div>
于 2013-07-05T11:01:19.717 回答
1

你错过了一个关闭<div>头部

<div>
    <div id="head">
        <div class="headleft">
             <h1>that's my header, baby</h1>
        </div>
        <div class="headright">
            <p>righty right</p>
        </div>
        <div style="clear: both" /></div>
    </div>
    <div id="body">
        <div class="feature">
             <h1>feature 1</h1>
        </div>
        <div class="feature">
             <h1>feature2</h1>
        </div>
        <div style="clear: both;" />
    </div>
</div>
于 2013-07-05T11:01:21.337 回答
1

您的 HTML 的问题是您错误地关闭了div标签。你不能这样关闭div's：<div/>. 您必须使用<div></div>. 请看这个工作小提琴。

于 2013-07-05T11:59:07.457 回答