Question

我有一个我正在创建的简单页面。当我在父div中创建一个子div时，它会继承背景，但是当我尝试将子div浮动到右边时，它会丢失继承的背景并变为白色。我可能会失踪什么？我的小提琴是here

我的css代码在这里

#fullwidth{
   width: 100%;
   /* background: url(../images/bg.jpg);*/
   background-color: black;
   background-repeat: repeat;
   position: relative;
   top: 0;
}

#fullwidth .container{
   width: 994px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   background: transparent;
}

#fullwidth .test{
   float: right;
}

我的div在这里

<div id="fullwidth">
        <div class="container">
            <div class="test">
                <ul id='header_nav'>
                    <!--li><img src="images/home-icon.png" /></li-->
                    <li><a href="../design.php">Design</a>
                        <ul>
                            <li><a href="../designproducts.php">Products</a></li>
                        </ul>
                    </li>
                    <li><a href="../events.php">Events</a>
                        <ul>
                            <li><a href="../eventsservices.php">Services</a></li>
                            <li><a href="../eventsgallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../pr.php">Public Relations</a>
                    </li>
                    <li><a href="../outdoor.php">Media and Outdoor</a>
                        <ul>
                            <li><a href="../outdoorservices.php">Services</a></li>
                            <li><a href="../outdoorgallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../production.php">Production</a>
                        <ul>
                            <li><a href="../productionservices.php">Services</a></li>
                            <li><a href="../productiongallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../login.php">Login</a>
                        <ul>
                            <!--li>Register</li-->
                        </ul>
                    </li>
                </ul>

            </div>
        </div>
    </div>

Answer 1

添加此

<强> HTML

<html>
<head>

</head>
<body>
    <div id="fullwidth">
        <div class="container">
            <div class="test">
                <ul id='header_nav'>
                    <!--li><img src="images/home-icon.png" /></li-->
                    <li><a href="../design.php">Design</a>
                        <ul>
                            <li><a href="../designproducts.php">Products</a></li>
                        </ul>
                    </li>
                    <li><a href="../events.php">Events</a>
                        <ul>
                            <li><a href="../eventsservices.php">Services</a></li>
                            <li><a href="../eventsgallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../pr.php">Public Relations</a>
                    </li>
                    <li><a href="../outdoor.php">Media and Outdoor</a>
                        <ul>
                            <li><a href="../outdoorservices.php">Services</a></li>
                            <li><a href="../outdoorgallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../production.php">Production</a>
                        <ul>
                            <li><a href="../productionservices.php">Services</a></li>
                            <li><a href="../productiongallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../login.php">Login</a>
                        <ul>
                            <!--li>Register</li-->
                        </ul>
                    </li>
                </ul>

            </div>
        </div>

        <div class="cler"></div>
    </div>

</body>

<强>的CSS

.cler{
    clear:both;
}

在你最后一个孩子的结尾

<强> demo

<强> ---------- 第二个选项是

写这个css

#fullwidth:after{
content:'';
    clear:both;
    overflow:hidden;
    display:table;
}

<强> Demo-2

Answer 2

it loses the inherited background and turn white

它没有失败，它只是浮动所以你只需要在div类test之后清除浮动。

这是一篇关于它的好文章http://www.quirksmode.org/css/clearing.html

Css无法申请儿童div

2 个答案: