为什么html中的容器在某些情况下不显示背景颜色?

时间:2016-06-16 06:46:11

标签: html css

我正在尝试使用class = container更改div的背景颜色,但它不起作用下面是代码。我无法理解背景颜色和位置元素的关联方式。

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:hotpink;
    margin: 0;
    padding: 0;
}

.container {
background-color:green;
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
</style>
</head>
<body>

<div class="container">
  <div class="right">
    <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
  </div>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

检查Fiddle Here ...

我删除了var h = $('.div1').height(); $('.div2').css({"padding-top" : "hpx"}); &amp;的position属性.container使用.right作为float:right类,请查看以下代码。

<强> CSS

.right

<强> HTML

body {
    background-color:hotpink;
    margin: 0;
    padding: 0;
}

.container {
    background-color:green;
    width: 100%;
}

.right {
    float:right;
    width: 300px;
    background-color: #b0e0e6;
}

.clearfix{
  clear:both;
}