Html 将3个div绝对放置在容器内左、中、右

我一直在尝试将一个logo div放在一个总有3个div的标题中。我要做的定位是左、中、右

问题在于，根据两侧内容的长度，左右div将推动中间div。

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

下面是我的代码示例：

请看这里->。更改浏览器大小时，中心div将保持在中心。这是我使用的

HTML

和

CSS

HTML:

---

希望这有帮助

如果将

.center

类设置为使用以下样式：

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

---

您可以将

标题

宽度作为徽标中心的参考。

我建议您对.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的浮动，并添加

left:0px和
右侧：0px分别为。
给你。。
。谢谢。
您是否尝试过为左、右div指定最大宽度？我不想将左、右div限制为固定宽度，因为它是一个响应性布局位置：绝对将元素从其包含的元素中移除。您需要.center div的position:relative。为左、右div指定一个宽度，然后将您的值分配给您的中心div。此外，在HTML中，它应该是左、中、右。有没有一种方法可以不调整宽度…如果不给头或左、右元素指定宽度，您就几乎被搞糟了。你必须给某个元素一个实际的宽度，这样css就有了基础。他不想给元素一个宽度，否则就跟你说的一样简单。编辑我的答案。元素不再具有固定宽度。中心div仍然保留在中心。是否可以将元素固定在容器中？因此，无论其他元素如何，它都会在容器中居中。不幸的是，新代码实际上没有居中，因为如果从左侧或右侧添加或删除内容，它会再次推动中心。有一种方法可以使用表来完成此操作。。。但你不会喜欢它我的问题是标题背景不再可见，因为它不会拉伸其他元素的高度，因为它们是“固定”的任何解决方法@用户3753346您可以为绿色背景使用宽度选项。使用此宽度：80px；如果中心拉伸得稍长，则会将其切断。
<header>
    <div class="left">LEFT ALSO PUSHES CENTER DIV</div>
    <div class="right">RIGHT PUSHES CENTER DIV</div>
    <div class="center">CENTER</div>
</header>

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

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

 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
}