Question

我正在寻找像：

这样的标题

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

所以有一个全部内联的标题。左边一直向左，右边一直向右，中心位于标题的中心。

挑战是#header是流动的。任何CSS建议。现在，我能想到的最好的方法是使用一个包含3行的表格。

由于

Answer 1

试试这个：

http://jsfiddle.net/z7k3J/

如果您调整页面中间的间隔条，您将看到所有“列”保持适当对齐。

关键是所有列的宽度加起来都是100％，你将它们全部浮动到左边（或者右边，它并不重要）。当您的宽度基于百分比时，它们将根据父级更改大小进行适当调整。

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

http://jsfiddle.net/h7qB8/

Answer 2

有没有理由说左右跨距漂浮对你不起作用？

Answer 3

您可以将HTML重新排序为左/右/中（或右/左/中）吗？如果是这样，float the columns and use margins or borders on the center将其从侧栏上移开。

Answer 4

这将是一个良好的开端：

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

这会将中间div中的所有内容都集中在一起，并将其他2个div放在一边。确保包含标题div的元素设置为position：relative; width：100％;同样。

Answer 5

你也可以在内部元素上使用display：inline-block，在外部容器上做一个文本对齐中心，然后在.left float：left; .right float：对。这将允许您在跨距上设置宽度，但保持它们与中心均匀间隔。参见：

#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那么可能会开辟更多。您可以使用弹性框布局：http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/或css3列：https://developer.mozilla.org/en/CSS3_Columns

css 3列的建议

5 个答案: