Question

我做了两个班，其中一个是主要的，另一个是儿童div。在主div我给出100％背景颜色的宽度：红色和儿童div我给出宽度100％和背景蓝色和边缘顶部100px。但在浏览器中红色不显示。如果我在主div中使用float，那么颜色出现在浏览器中，但主类已经有100％的宽度，所以我们不应该在其中给出float元素。

<style>

.main {width:100%; background-color:#FF0000}

.child { width:100%; margin-top:100px; background:#0000FF}

</style>

</head>

<body>

<div class="main">   
    <div class="child">asfda</div>
</div>

Answer 1

看小提琴：

小提琴：http://jsfiddle.net/uT7Vv/

演示：http://jsfiddle.net/uT7Vv/embedded/result/

Answer 2

您的保证金为collapsing。您可以通过在父元素上使用padding来解决此问题：

.main {
    background-color: red;
    padding-top: 100px;
    width: 100%;
}

.child {
    background-color: blue;
    width: 100%;
}

Here's a demo.

Answer 3

您的孩子div在您的主要Div上重叠

需要在主div中给出高度。试试这个

<style>

.main {width:100%; background-color:#FF0000;height:50px;}

.child { width:100%; margin-top:100px; background:#0000FF}

</style>

</head>

<body>

<div class="main">

<div class="child">asfda</div>
</div>

CSS背景颜色没有显示出来？

3 个答案: