html - 将 3 个 div 绝对定位在容器内左、中、右

Question

我一直在尝试将 Logo div 置于标题中，该标题总共有 3 个 div。我要进行的定位是左、中、右。

问题在于，左右 div 会根据两侧内容的长度插入中心 div。

我希望中心 div 不受左右 div 的影响。

这是我的代码示例:http://codepen.io/anon/pen/KDhou

<header>
 <div class="left">LEFT ALSO PUSHES CENTER DIV</div>
 <div class="right"> RIGHT PUSHES CENTER DIV</div>
 <div class="center">CENTER</div>
</header>

和CSS

 header{
 color:white; 
   position: absolute;
  text-align: center;
  left: 0;
  width:100%;
  top: 0;
  background-color: #2995f3;}

.center{
  position: absolute;
  display: inline-block;
  background:green;
}
.left{
    float: left;
    background:grey
}
.right{
    float: right;
    background:red
}

Answer 1

我建议对您的 .css 文件进行一些更改。

 header{
color:white; 
position: absolute;
text-align: center;
left: 0;
width:100%;
top: 0;
background-color: #2995f3;}

.center{
position: fixed;
display: inline-block;
background:green;
}
.left{
left:0px;
position:fixed;
background:grey
}
.right{
right:0px;
position:fixed;
background:red
}

.center, .left & .right 类的位置固定并从 .left 和 .right 中消除 float 并分别添加 left:0px; 和 right:0px;。在这里.. http://codepen.io/rjeet0/pen/xyDGg .谢谢。