Как выровнять три пролета с помощью CSS (без таблиц)

Question

У меня есть эта таблица в некотором коде;

<table>
    <tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
    <tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
    <tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
</table>

Я бы не хотел использовать таблицы и делать выравнивание и все такое в CSS. Я пытался;

<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>

Пример будет пытаться преобразовать эти данные в CSS для выравнивания, как таблица;

<table>    
<tr><td align="left">Bob</td><td align="center">Dingle</td><td align="right">3923.33</td></tr>
<tr><td align="left">Johann</td><td align="center">Strauss</td><td align="right">33.33</td></tr>
<tr><td align="left">Skip</td><td align="center">Skipperson</td><td align="right">0</td></tr>
</table>

Но текст посередине не выровнен как неровный (разной длины), как и левые и правые значения. Кажется, это безумие, и я склоняюсь к "Просто используйте таблицы" .

Answer 1

Во-первых, получите правильный HTML-код: используйте правильные теги для хранения ваших данных. Предоставленной вами информации недостаточно для того, чтобы мы могли определить, какой тип информации вы пытаетесь отформатировать. Если это табличные данные, то использование таблиц не стыдно - это то, для чего оно предназначено.

Теперь правильный способ использования CSS - , а не , чтобы все ваши стили были встроены, как то, что вы делаете. Вместо этого держите их в отдельном файле CSS и используйте селекторы, чтобы избежать необходимости повторяться много раз.

Вот решение: http://www.jsfiddle.net/2TDXc/

О, и, пожалуйста, не слушайте эту чушь "Просто используйте стол". Действительно, в конечном итоге это будет лучше для всех.

Answer 2

Вам необходимо использовать атрибуты display:inline и display:inline-table css. Они отлично подходят для того, чтобы заставить любой элемент сидеть рядом друг с другом на одной линии.

<div>
    <span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
    <span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
    <span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
</div>

Что касается зубчатости, вы должны понимать, что ваши столбцы не наследуют и не разделяют что-либо друг от друга, как это было бы в таблице, поэтому в конечном итоге вам придется жестко кодировать ширину. Похоже, что стол может быть то, что вам нужно.

Answer 3

Что вы имеете в виду зубчатые? Ты имеешь в виду, что хочешь text-align:justify? Или вы имеете в виду, что у вас проблемы с колоннами разной высоты? Если последний, содержащий div может помочь. В этом отношении попробуйте использовать div вместо span или установить display:block

В любом случае, просмотр шаблонов CSS, предоставленных Мэтью Джеймс Тейлор может помочь, если вы имеете в виду последнюю проблему.