Question

所以，我尝试在父{div}内设置2个浮动div，其中position设置为fixed，2个子项浮动到left和right。但是对于一些共鸣，代码没有按预期工作。这是我的小提琴：http://jsfiddle.net/adityasingh773/cqn73m0p/ 我试图实现的是让这两个子div根据他们的CSS属性浮动，即向左和向右。我不喜欢为每个子元素分配宽度，因为它会使代码无响应。这是我试过的 HTML

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

Answer 1

您的.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>

元素不会漂浮在固定的div中？

1 个答案: