Для розв'язання задачі існує кілька способів, з яких ми розглянемо два. Перший, в якомусь сенсі традиційний, заснований на таблицях, а другий використовує шари і стилі.
Використання таблиць
Створюємо таблицю з двома отворами шириною дорівнює 50%. У лівій клітинці за замовчуванням текст буде вирівняно по лівому краю, а для правої клітинки необхідно задати вирівнювання по правому краю. Щоб не виникло додаткових відступів навколо тексту, необхідно використовувати властивість border-spacing з нульовим значенням для селектора <table>. У прикладі 1 показано створення таблиці, параметри якої задаються через стилі.
Приклад 1. Вирівнювання тексту за допомогою таблиці
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Два різних тексту на одному рядку</title>
<style>
table.text {
width: 100%; /* Ширина таблиці */
border-spacing: 0; /* Відстань між осередками */
}
table.text td {
width: 50%; /* Ширина комірок */
vertical-align: top; /* Вирівнювання по верхньому краю */
}
td.rightcol { /* Права осередок */
text-align: right; /* Вирівнювання по правому краю */
}
</style>
</head>
<body>
<table class="text">
<tr>
<td>Текст зліва</td>
<td class="rightcol">Текст праворуч</td>
</tr>
</table>
</body>
</html>
В даному прикладі додано вирівнювання по верхньому краю комірок, на той випадок, що текст може займати кілька рядків.
Використання стилів
Щоб розташувати два різних тексту на одному рядку застосовується стильове властивість float зі значенням left. Початково float призначався для створення обтікання навколо елемента, але згодом став активно використовуватися при верстці верств, зокрема при створенні колонок. З тією ж метою скористаємося ним і ми. Для цього створюємо два класи leftstr і rightstr, для яких встановимо завширшки 50% і обтікання по лівому краю (float: left). Вирівнювання тексту по правому краю для правого шару задається стильовим властивістю text-align зі значенням right (приклад 2).
Приклад 2. Положення тексту
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Два різних тексту на одному рядку</title>
<style>
.leftstr, .rightstr {
float: left; /* Обтікання праворуч */
width: 50%; /* Ширина текстового блоку */
}
.rightstr {
text-align: right; /* Вирівнювання по правому краю */
}
</style>
</head>
<body>
<p class="leftstr">Рядок 1</p>
<p class="rightstr">Рядок 2</p>
<div style="clear: left"></div>
</body>
</html>
В даному прикладі стильові класи leftstr і rightstr додаються до абзацу тексту. Властивість float діє не тільки на поточний елемент, але й прилеглі до нього елементи. Тому після створення потрібних рядків слід скасувати дію float за допомогою властивості clear.