Question

在同一条线上获得三个文本的最佳方法是什么：一个在左边，另一个在中间，第三个在右边？

+---------------------------------------------------------------------+
|Page generated in 1 ms           Copyright 2010              Email me|
+---------------------------------------------------------------------+

一个文本可能比其他文本更长，但它们的位置不得更改。无论其他人的长度如何，中间的人必须始终处于中间位置。

使用表格很简单，而且我已经知道如何做到这一点，所以只使用“正确”的解决方案（使用表格进行布局是错误的）。

编辑：很多人因某种原因假设我需要在多行上显示表格数据。我不确定为什么他们认为是这种情况，但是：

它只有一行
这不是表格数据

因此，表格不合适，解决方案只需要使用一行。

Answer 1

从字面上看你的问题，我就是这样做的。

<div style="position:absolute;text-align:left">Text 1, a bit longer</div>
<div style="position:absolute;width:100%;text-align:center">Text 2</div>
<div style="text-align:right">Text 3</div>

这在实践中是否适合你，取决于文本实际是什么。请注意，如果div的容器太窄，文本将彼此重叠，而不是像它们在表格单元格中那样换行。

如果您想要类似于表格的布局行为，您有两种选择。您可以使用表，也可以使用CSS display：table，display：table-cell etc属性。可悲的是，后者在IE6或IE7中不受支持，所以可能在网上还没有真正可用。

Answer 2

我找到了一个非常好的方法，即使一个或多个段落跨越多行也能正常工作。

<p style="float: left; width: 33.3%; text-align: left">Page Statistics</p>
<p style="float: left; width: 33.3%; text-align: center;">&copy; 2010</p>
<p style="float: left; width: 33.3%; text-align: right;"><a>Email me</a></p>

Answer 3

所以你想要一遍又一遍地显示三个数据，以垂直模式堆叠，代表某种数据，选项等？

对我而言，这就是表格的用途。

/ *删除了评论框，OP修复了它* /

Answer 4

你可以使用无序列表和一些CSS，如果你想保持“语义”

<ul id="text_block">
  <li class>Text 1, a bit longer</li>
  <li class>Text 2</li>
  <li class>Text 3</li>
</ul>

和CSS

ul#text_block {display: table; margin: 0; padding: 5px;}
ul#text_block li {list-style: none; display: inline; margin: 0 40px 0 0;}

希望这会有所帮助

Answer 5

也许你需要看一下网格设计系统？

http://www.subtraction.com/2004/12/31/grid-computi
http://www.subtraction.com/pics/0703/grids_are_good.pdf

或者，您始终可以使用浮动div，按float，width和poisition CSS属性播放。

左，中，右文字

5 个答案: