Question

我一直试图将徽标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＆amp;的位置还有正确的课程并从.left和.right中删除浮点数并分别添加left:0px;和right:0px;。这是.. http://codepen.io/rjeet0/pen/xyDGg 谢谢。

Answer 2

见这里 - ＆gt; http://jsfiddle.net/KLXPL/1/。当浏览器大小改变时，您的中心div保留在中心。这是我使用的HTML和CSS：

HTML：

<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 {
    clear:both;
    display: inline-block;
    background:green;
}
.left {
    float: left;
    background:grey;
    display:inline-block;
}
.right {
    float: right;
    background:red;
    display:inline-block;
}

希望这有帮助!!!

Answer 3

如果您将.center类设置为样式：

.center{
  position: absolute;
  display: inline-block;
  background:green;
  left: 50%;
  right: 50%;
}

您可以将徽标中心作为header宽度的参考。

将3个div绝对放置在容器左侧，中间，右侧

3 个答案: