Справочник по CSS (ЦСС) и ШТМЛ
Как разместить два слова на одной строке, чтобы одно выравнивалось по левоой стороне, а второе по правому?
Для решения задачи существует несколько способов, из которых мы просмотрим два. Первый, в каком-то смысле традиционный, основан на таблицах, а второй использует слои и стили.
Использование таблиц
Создаем таблицу с двумя ячейками шириной равной 50%. В левой ячейке по умолчанию контент будет выравниваться по левоой стороне, а для правой ячейки необходимо задать выравнивание по правой стороне. Чтобы не возникло дополнительных отступов вокруг контента, необходимо обнулить параметры cellspacing и cellpadding у тега <TABLE>. В примере 1 показано создание таблицы, часть параметров которой задается через стили.
Пример 1. Выравнивание контента с помощью таблицы
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Два разных контента на одной строке</title>
<style type="text/CSS (ЦСС)">
table.text {
width: 100%; /* Ширина таблицы */
}
table.text td {
width: 50%; /* Ширина ячеек */
vertical-align: top; /* Выравнивание по верхнему краю */
}
td.rightcol { /* Правая ячейка */
text-align: right; /* Выравнивание по правой стороне */
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" 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. Положение контента
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Два разных контента на одной строке</title>
<style type="text/CSS (ЦСС)">
p.leftstr, p.rightstr {
float: left; /* Обтекание справа */
width: 50%; /* Ширина контентового блока */
}
p.rightstr {
text-align: right; /* Выравнивание по правой стороне */
}
</style>
</head>
<body>
<p class="leftstr">Строка один</p>
<p class="rightstr">Строка два</p>
<div style="clear: left"></div>
</body>
</html>
В данном примере стилевые классы leftstr и rightstr добавляются к абзацу контента. Параметр float действует не только на текущий слой, но и близлежащие к нему элементы. Поэтому после разработки нужных строк следует отменить действие float с помощью атрибута clear.