Question

我试图将3 div s放在同一条线上，然后并排向右推。它们是类div的{{1}}。正如您现在所看到的，它们在左侧堆叠在一起，而包含它们的nav-button具有蓝色背景。只要我将div添加到float: right;，它们就会按照我想要的方式排列，但由于某种原因，它们包含的nav-button会丢失其背景颜色。有人能解释一下原因吗？

链接： http://jaminweb.com/bestOfLR.php

HTML：

div

CSS：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type"text/css" href="LR_styles.css"/>
</head>
<body>
    <div class="outer-container">
        <div class="header-container">
            <div class="header-bluetop">
                <div class="logo-blob">
                    <span>L</span>
                    <span>e</span>
                    <span>t</span>
                    <span>s</span>
                    <span>R</span>
                    <span>u</span>
                    <span>n</span>
                    <span>.</span>
                    <span>c</span>
                    <span>o</span>
                    <span>m</span>
                </div>
                <div class="nav-container">
                    <div class="nav-button">
                        <h3>Best Posters</h3>
                    </div>
                    <div class="nav-button">
                        <h3>Best Posts</h3>                   
                    </div>
                    <div class="nav-button">
                        <h3>News</h3>                      
                    </div>
                </div>
            </div>
            <div class="subheader">

            </div>
        </div>
        <div class="middle-conatiner">

        </div>
        <div class="footer-container">

        </div>
    </div>

</body>
</html>

加分点： 为什么

div.outer-container
{font-family: "Lato","Droid Sans",Arial,Verdana,sans-serif;}

div.header-container
{}
    div.header-bluetop
    { background-color: #00325F; position: relative; }
        div.logo-blob
        {
            position: absolute;
            top: 0px;
            left: 30px;
            width: 250px;
            height: 64px;  
            background-color: #F8C525;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            font-size: 25px;
            font-weight: 100;
            line-height: 64px;
            text-align: center;
            letter-spacing: 0.5px;
            border: 5px solid #FFF;
        }
            div.logo-blob > span 
            { font-family: "Droid Serif",serif; font-size: 25px; font-weight: 100; }
            div.logo-blob > span:nth-of-type(2n)
            { color: #306AB5; }
            div.logo-blob > span:nth-of-type(2n+1)
            { color: #d42222;; }

        div.nav-container
        {}
            div.nav-container > div.nav-button
            {  }
                div.nav-container > div.nav-button > h3:nth-of-type(2n+1)
                { color: #FFF; }
                div.nav-container > div.nav-button > h3:nth-of-type(2n)
                { color: #F8C525; }

div.subheader
{}

div.middle-container
{}

div.footer-container
{}

不工作？

Answer 1

因为当你浮动你的nav-button元素时，你的容器元素中没有插入元素，你的logo-blob绝对定位。

overflow:hidden还有清除花车的额外好处：

当然，有other ways来清除花车。

对于您的nth-of-type()选择器，您正在将它们应用于错误的元素：

＆＃13;

div.outer-container {
    font-family:"Lato", "Droid Sans", Arial, Verdana, sans-serif;
}
div.header-container {
}
div.header-bluetop {
    background-color: #00325F;
    position: relative;
}
div.logo-blob {
    position: absolute;
    top: 0px;
    left: 30px;
    width: 250px;
    height: 64px;
    background-color: #F8C525;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 25px;
    font-weight: 100;
    line-height: 64px;
    text-align: center;
    letter-spacing: 0.5px;
    border: 5px solid #FFF;
}
div.logo-blob > span {
    font-family:"Droid Serif", serif;
    font-size: 25px;
    font-weight: 100;
}
div.logo-blob > span:nth-of-type(2n) {
    color: #306AB5;
}
div.logo-blob > span:nth-of-type(2n+1) {
    color: #d42222;
    ;
}
div.nav-container {
    overflow:hidden;
}
div.nav-container > div.nav-button {
    float:right;
}
div.nav-container > div.nav-button:nth-of-type(2n+1) > h3 {
    color: #FFF;
}
div.nav-container > div.nav-button:nth-of-type(2n) > h3 {
    color: #F8C525;
}
div.subheader {
}
div.middle-container {
}
div.footer-container {
}

＆＃13;

<div class="outer-container">
    <div class="header-container">
        <div class="header-bluetop">
            <div class="logo-blob"> <span>L</span>
 <span>e</span>
 <span>t</span>
 <span>s</span>
 <span>R</span>
 <span>u</span>
 <span>n</span>
 <span>.</span>
 <span>c</span>
 <span>o</span>
 <span>m</span>

            </div>
            <div class="nav-container">
                <div class="nav-button">
                     <h3>Best Posters</h3>

                </div>
                <div class="nav-button">
                     <h3>Best Posts</h3> 
                </div>
                <div class="nav-button">
                     <h3>News</h3> 
                </div>
            </div>
        </div>
        <div class="subheader"></div>
    </div>
    <div class="middle-conatiner"></div>
    <div class="footer-container"></div>
</div>

＆＃13;

为什么“浮动：正确;”消除包含它的div的背景颜色？

1 个答案: