Автор: Крис Койер
Перевод: Всеволод Козлов
Нередко встречаемая ситуация, когда необходимо текст на одной строке одновременно выровнять по левому и правому краям. Наглядным примером может служить футер, когда, например, информацию о копирайтах Вы хотите разместить слева на строке, а контактную информацию справа.
Для пояснения вышесказанного покажу скриншот того, что мы получим в итоге:
Как же это сделать? Код-решение проблемы далее…
CSS-фрагмент кода:
.alignleft {
float: left;
}
.alignright {
float: right;
}
HTML-фрагмент кода
<div id="textbox">
<p class="alignleft">Text on the left.</p>
<p class="alignright">Text on the right.</p>
<div style="clear: both;"></div>
</div>
Оригинал статьи: Left Align and Right Align Text on the Same Line
Смотрите также:
- Prestashop шаблоны
- Скрипт галереи
- Jquery скрипты
- Красивые таблицы css
- Семантическая разметка
- Css button
- Иконка корзины
- Css конструктор
- Blockquote css
- Сделать сайт
19 комментария(-ев)
хорошая идея!
Вообще-то, не самое лучшее решение. Коротко и красиво, но только пока у нас нет проблем с шириной экрана и строк. Если сжать, то правый текст пойдет под левый.
SHAman, предложите решение получше!
Предлагаю так:
CSS
.alignleft {float: left; width:50%; text-align:left}
.alignright {float: right; width:50%; text-align:right}
HTML
Text on the left.
Text on the right.
При таком написании ничего перепрыгивать не будет.
У HTML съелись теги
В общем, от такой же, как в примере.
изучи ворд и у тебя все получется ,больше литературы там все описано
Оригинально, спасибо
Если добавить
.textbox { width: 100%; align: hidden; }
то дополнительный div не нужен
быстро писал, руки не слушаются
.textbox { width: 100%; overflow: hidden; }
вариант у самизнаетекого — http://www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie_by_padding/
Как это просто оказалаось, а я ведь голову ломал. Спасибо за наводку.
Для очистки плавающих блоков вместо
<div style=»clear: both;»></div>
можно использовать элемент <br /> HTML с CSS-стилем:
BR {
clear: both;
}
У Родиона изящное решение, хорошо когда понятно просто и все работает.
Писец, Токмаков решение нашёл — война и мир в двух томах, в одном CSS файле.
искал решение данного вопроса.. Благодарю автора!
ОПЯТЬ БАЯН
А в случае использования в этом блоке тега со ссылкой для её визуализации добавить ещё и вид курсора.
.alignRight {float: right; width:50%; text-align:right; cursor:hand}
[quote=Родион].alignleft {float: left; width:50%; text-align:left}
.alignright {float: right; width:50%; text-align:right}[/quote]
не проканает такой код. потому-что ИЕ не пропустит.
пример — у нас размер 101рх,
вложеннве блоки имеют 50%. ИЕ решит что это по 51му пикселу (!) и блок выпадет. кто не верит — попробуйте реализовать и по ресайзите окно броузера.
предлагаю вариант
.alignleft {float: left; width:50%; text-align:left}
.alignright {margin-left:50%; text-align:right}
меня всегда выручал
А как аналогично выровнять для тега option?