Элементы не плавают внутри фиксированного div?

Итак, я попытался создать 2 плавающих divs внутри родительского div, у которого position установлено значение fixed, а 2 ребенка плавают до left и right. Но для некоторого резонанса код работает не так, как ожидалось. Вот моя скрипка: http://jsfiddle.net/adityasingh773/cqn73m0p/ Я попытался добиться того, чтобы эти 2 дочерних divs плавали в соответствии со своим свойством CSS, то есть слева и справа. Я не люблю назначать ширину для каждого дочернего элемента, поскольку это сделает код невосприимчивым. Вот что я пытался HTMLЭлементы не плавают внутри фиксированного div?

<div class="container"> 
    <nav class="top-nav"> 
     <section> 
      <div class="left">left</div> 
      <div class="right">right</div> 
     </section> 
    </nav> 
</div>

И CSS

body{ 
    margin: 0; 
    padding: 0; 
} 
.container{ 
    width: 80%; 
    margin: 0 auto; 
} 
nav.top-nav{ 
    position: fixed; 
    top: 0; 
    display: block; 
} 
.left{ 
    position: relative; 
    float: left; 
} 
.right{ 
    position: relative; 
    float: right; 
}

источник

2015-09-27 Lucky Ali

Ваш .topnav не имеет ширину. Что касается фиксированного навигатора, который не ограничивается контейнером, то, возможно, вам поможет Fixed position but relative to container.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
nav.top-nav { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; //added so right is visible 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.left { 
 
    position: relative; 
 
    float: left; 
 
} 
 
.right { 
 
    position: relative; 
 
    float: right; 
 
}

<body> 
 
    <div class="container"> 
 
    <nav class="top-nav"> 
 
     <section> 
 
     <div class="left">left</div> 
 
     <div class="right">right</div> 
 
     </section> 
 
    </nav> 
 
    </div> 
 
</body>

источник

2015-09-27 19:22:21 Steve

Спасибо! Я забыл об этом! –

Элементы не плавают внутри фиксированного div?

ответ

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