Fatal编程技术网
  • html/
  • Html 为什么是；浮动：对&引用；消除包含它的div的背景色？

Html 为什么是；浮动：对&引用；消除包含它的div的背景色？

html css

Html 为什么是；浮动：对&引用；消除包含它的div的背景色？,html,css,Html,Css,我试着让3个divs在同一条线上，并排从右边推出。它们是类nav按钮的divs。正如您现在所看到的，它们在左侧相互堆叠，并且包含它们的div具有蓝色背景。只要我添加float:right到nav按钮s，它们像我希望的那样排列，但由于某种原因，它们包含的div失去了背景色。有人能解释一下原因吗 链接： HTML: <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"/> &l

我试着让3个
div
s在同一条线上，并排从右边推出。它们是类
nav按钮的
div
s。正如您现在所看到的，它们在左侧相互堆叠，并且包含它们的
div
具有蓝色背景。只要我添加
float:right
到
nav按钮
s，它们像我希望的那样排列，但由于某种原因，它们包含的
div
失去了背景色。有人能解释一下原因吗

链接：

HTML:


<!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
{}


奖励点：为什么


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



不工作
 因为当您浮动
导航按钮
元素时，您的容器元素内没有流动元素，而
徽标blob
处于绝对位置


overflow:hidden
具有清除浮动的额外好处：

当然，还有清除浮动的方法

至于您的
nth-of-type（）
选择器，您将它们应用于错误的元素：



div.outer-container{
字体系列：“Lato”，“Droid Sans”，Arial，Verdana，Sans serif；
}
分区标题-容器{
}
分区标题-bluetop{
背景色：#00325F；
位置：相对位置；
}
分区标识-blob{
位置：绝对位置；
顶部：0px；
左：30px；
宽度：250px；
高度：64px；
背景色：#F8C525；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
字体大小：25px；
字号：100；
线高：64px；
文本对齐：居中；
字母间距：0.5px；
边框：5px实心#FFF；
}
div.logo-blob>span{
字体系列：“Droid衬线”，衬线；
字体大小：25px；
字号：100；
}
div.logo-blob>span:n类型（2n）{
颜色：#306AB5；
}
div.logo-blob>span:n个类型（2n+1）{
颜色：#D422222；
;
}
导航舱{
溢出：隐藏；
}
div.nav-container>div.nav-button{
浮动：对；
}
div.nav-container>div.nav-button:n类型（2n+1）>h3{
颜色：#FFF；
}
div.nav-container>div.nav-button:n类型（2n）>h3{
颜色：#F8C525；
}
分区分目{
}
中间容器{
}
div.footer-container{
}



L
E
T
s
R
U
N
.
C
o
M
最佳海报
最佳职位
消息

它没有。它失去了它的高度，因此你看不到蓝色。设置固定高度或播放display:参数。此外，您可能需要在导航按钮的末尾添加一个“清除：两个”的div集。