Левый, центральный и правый текст

Question

Как лучше всего получить три текста в одной строке: один слева, другой посередине и третий справа?

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

Один текст может быть длиннее других, но их позиция не должна меняться. Один посередине всегда должен быть посередине, независимо от длины других.

Сделать это с помощью таблиц было бы легко, и я уже знаю, как это сделать, поэтому «правильные» решения (использование таблиц для верстки неверно).

---

РЕДАКТИРОВАТЬ : многие люди по какой-то причине предположили, что мне нужно отображать табличные данные в нескольких строках. Я не уверен, почему они думали, что это так, но:

• В нем будет только один ряд
• Это не табличные данные

По этой причине таблица не подходит, и решение должно работать только с одной строкой.

Answer 1

Я нашел очень хороший способ сделать это, который работает, даже если один или несколько абзацев будут занимать несколько строк.

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

Если принять ваш вопрос буквально, вот как я это сделаю.

<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 и т.д. К сожалению, последний не поддерживается в IE6 или IE7, поэтому, вероятно, пока что его нельзя использовать в Интернете.

Answer 3

вы можете сделать это с неупорядоченным списком и немного 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 4

Таким образом, вы хотите отображать три фрагмента данных, многократно, сгруппированных в вертикальной структуре, которая представляет собой какие-то данные, опции и т. Д.?

Звучит так, словно для этого предназначены таблицы.

/ * Удален комментарий окна, OP исправил его * /

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.