css突然失去第二个相反浮动元素?

时间:2014-02-15 16:23:39

标签: css document flow floating

我有一个非常简单的代码,一个容器元素和两个内部元素h1和h2都以相反的方向浮动。然而,当我申请第二个元素时,我发现了以下属性:尽管我将空段落标记设置为属性清除:两者都只是为了确定父崩溃不会发生。然而,第二个元素似乎仍然缺失?这是我的HTML代码:

<body>
    <div id="container">
        <h1>first heading</h1>
        <h2>second heading</h2>
        <p></p>
    </div>
</body>

这是我的css代码:

body, div, h1, h2{
    margin:0;
    padding:0;
    }
body{
    width:960px;
    margin:0 auto;
    background:red;
}

#container{
        background:navy;

}
#container h1{
    background:gray;
    width:200px;
    height:200px;
    float:left;

    }
#container h2{
    background:yellow;
    width:200px;
    width:200px;
    float:right;
}
p{
    clear:both;
}

请帮助任何时间救世主?

3 个答案:

答案 0 :(得分:1)

width:200px;中有2x #container h2个样式定义。将其更改为height,一切都将开始工作:)

答案 1 :(得分:1)

你写的宽度是两倍而不是高度。请将其替换为以下内容。

#container h1{
    background:gray;
    width:200px;
    height:200px;
    float:left;

    }
#container h2{
    background:yellow;
    width:200px;
    height:200px;
    float:right;
}

这是一个小提琴 http://jsfiddle.net/s9C6D/

Snap from fiddle

答案 2 :(得分:0)

maximglad​​kov是对的我觉得......?

这是他的建议:

http://codepen.io/anon/pen/vjefh