Почему «плавать: правильно»; устраняя цвет фона div, который содержит его?

Я пытаюсь получить 3 div s, чтобы быть на одной линии, сдвинутой справа, бок о бок. Это div с класса nav-button. Как вы можете видеть прямо сейчас, они сложены друг на друга слева, а содержащиеся в них div имеют синий фон. Как только я добавляю float: right; в nav-button, они выстраиваются в линию, как я хочу, но по какой-то причине их содержание div теряет свой цвет фона. Может кто-нибудь объяснить, почему?Почему «плавать: правильно»; устраняя цвет фона div, который содержит его?

Ссылка:http://jaminweb.com/bestOfLR.php

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>

CSS:

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

Bonus точка: Почему именно

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

Не работает?

источник

2014-10-18 Micro Optimizer

это не делает. он теряет свою высоту и, следовательно, вы не видите синего. установите высоту фиксации или играйте с параметром display:. также вы можете добавить набор div для очистки: оба в конце кнопок навигации. –

Потому что, когда вы плаваете ваши элементы nav-button, ваш элемент контейнера не имеет внутри него элементов потока, что при абсолютно позиционированном logo-blob.

overflow:hidden имеет дополнительное преимущество клиринговых поплавков:

Конечно, Есть other ways очистить поплавки.

Что касается ваших nth-of-type() селекторов, вы подаете их к неправильному элементу:

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

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

источник

2014-10-18 15:59:17 George

Почему «плавать: правильно»; устраняя цвет фона div, который содержит его?

ответ

Смежные вопросы