0

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

我的 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>
4

2 回答 2

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;
}

在你的最后一个 div 子端

演示

---------- 第二个选项是

写这个 CSS

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

演示-2

于 2012-12-12T08:52:18.357 回答
0 
it loses the inherited background and turn white

它不会失败，它只是浮​​动，所以你只需要在divwith class之后清除浮动test。

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

于 2012-12-12T08:57:24.013 回答