css对3列的建议

我希望创建一个标题，如：

<div id="header>
 <span class="left></span>
 <span class="center"></span>
 <span class="right></span>
</div>

是否存在浮动左右跨距对您不起作用的原因？
能否将HTML重新排序为左/右/中（或右/左/中）？如果是这样，请将其从侧栏上拿开。
这将是一个良好的开端：

<div id="header" style="position:relative;width:100%;">
 <div class="left" style="position:relative;width:200px;float:left;"></div>
 <div class="center" style="position:relative;float:left;text-align:center;"></div>
 <div class="right" style="position:relative;width:100px;float:right;"></div>
</div>



这将把中间的一切都集中在中间，并把其他2个球放在一边。确保包含标题div的元素设置为position:relative；宽度：100%；还有。
试试这个：


如果你在页面中间调整间隔条，你会看到所有的“列”保持适当对齐。
关键是所有列的宽度加起来都是100%，并且您可以将它们all浮动到左侧（或者右侧，这并不重要）。当宽度基于百分比时，它们将随着父对象大小的更改而适当调整

如果只关心文本的右/中/左（而不是图像等），还可以将所有列设置为100%宽度和绝对位置，然后只使用文本对齐：

您还可以在内部元素上使用display:inline块，在外部容器上使用文本居中对齐，然后使用。left float:left。右浮动：对。这将允许您在跨距上设置宽度，但要使跨距与中心保持均匀间隔。见：

#header {
     width: 100%;
     text-align: center; 
}

.left, .center, .right {
    display: inline-block;
    width: 100px;
    border: 1px solid green;
}

.center {
     text-align: center;

}

.left {
    float: left;
}

.right {
    float: right;
}

在你的问题中没有提到它，但是在你的标签中有它——如果你能够使用CSS3，那么可能性就更大了。当您说“#标题是流体”时，可以使用flex box布局：或css3列：
您是指宽度吗？如果页眉的宽度发生变化，您是否希望这3列展开和收缩？正确，页眉的宽度是流动的。。。我不希望这3列展开，它们可以是固定宽度的。但我需要他们保持一致。在.center中的棘手问题，我需要始终保持中心对齐。如果我理解正确，我认为我下面的解决方案就是您想要的。当然，你可以随意使用css来满足你的需要。左右浮动效果很好，但是中心项目呢？这就是困惑所在。您可以将“文本对齐：中心”应用于中心跨度。然后，其中的任何内容都将居中。为什么列元素中的所有宽度都是任意的？仅举个例子，这些宽度可以是任意的，但左和右div应该有显式的宽度。问题是，您将左浮动2个元素，右浮动1个元素。这意味着您的中心跨度将始终撞向左侧元素。不确定上述操作是否确保中心div始终与流体div（收割台）的中心对齐。您的解决方案将只保持左侧和中心div与左侧对齐，当标题展开时，只有右侧div将随之移动。这很好，但现在处于不同的垂直方向，线高度已关闭。