Css выравнивание по правому краю. Выравнивание по правому краю Css выравнивание правому краю div

До некоторого времени я, как и многие из вас, пользовался двумя способами:

1. Первый способ основан на свойстве float. Левому блоку задаётся float: left, правому float: right
2. Второй способ заключается в абсолютном позиционировании правого блока, с параметрами right: 0 либо left: 100%, margin-left: -(ширина блока)

Главный недостаток обоих способов заключается в том, что, если блоки нужно выравнять по нижней границе или по средней линии относительно друг друга, то приходится методом подбора смещать блоки по вертикали, задавая им либо top: anyValue, либо margin-top: anyValue. А у первого способа плюс ко всему есть ещё один, не то чтобы недостаток, но неприятная мелочь. Это необходимость очищать поток с помощью clearFix"a, overflow или дополнительного дива.
Итак способ номер 3. Для начала код:

Собственно HTML

Copy Source | Copy HTML

1. < div class ="wrap">
2. < div class ="left">< a href ="#"> Левый блок< div class ="right">< a href ="#"> Правый блок

Собственно CSS

Copy Source | Copy HTML

1. .wrap {
2. width : 500px ;
3. background : #555 ;
4. height : 500px ;
5. .left , .right {
6. display : inline -block ;
7. //display: inline;
8. //zoom: 1;
9. width : 100% ;
10. margin-right : -100% ;
11. vertical-align : bottom ;
12. .right {
13. text-align : right ;
14. .left a , .right a { display : inline -block ; position : relative ; }
15. .left a { width : 200px ; height : 100px ; background : green ; }
16. .right a { width : 100px ; height : 200px ; background : pink ; }

Пояснения

Суть способа заключается в том, чтобы наложить блоки друг на друга посредством margin-right: -100% и содержимое правого блока выровнять по правому краю с помощью text-align: right.
Оба блока (right и left) желательно записывать в одну строку, иначе из-за символа переноса строки правый блок будет чуть-чуть вылезать за границы блока-родителя.
Ссылкам обязательно нужно ставить position: relative, иначе из-за наложения блоков некоторые могут быть некликабельные.

Плюсы способа

Главный плюс в том, что теперь для наших блоков начинает работать vertical-align. И мы легко можем выровнять их и по верхней границе и по нижней и по центру.

Минусы способа

А главный минус заключается в том, что, применяя этот способ, мы должны быть твёрдо уверены, что содержимое блоков не увеличится до такой степени, что они начнут перекрывать друг друга (к слову говоря, способ с флоутами лишён этого недостатка, так как при увеличении содержимого блоков, они будут вставать друг под друга).

P.S.

Я не встречал такого способа в интернете, посему просьба: если кто-то найдёт аналогичную статью опубликованную раньше, сообщите мне пожалуйста.

Upd.

В комментариях моё внимание внимание обратили на способ, использующий text-align: justify. Этот способ тоже хорош, но у него есть два недостатка. Во-первых он требует введения дополнительного элемента, эмулирующего последнюю строку текстового блока, а во-вторых, он не будет работать в IE6-IE7 для блочных элементов.

В данной статье рассмотрим как выровнять картинку по правому и левому краю средствами css на сайте.

Как выровнять картинку по правому краю в css

Для выравнивания изображения по правому краю используется свойство "float:right" . Свойство float меняет вид отображения картинки(или другого элемента) на блочный, но с особенностями: она становится невидимой для других блочных элементов, но при этом сохраняет видимость для строчных (display:inline), которые ее обтекают.

Эта особенность позволяет выровнять изображение по правому и левому краю в css, а также другие элементы по краю без использования таблиц и большого количества лишнего кода. Подробную информацию как работает это свойство можно найти в поисковых системах по запросу "float css".

Когда картинка сместилась, то текст и прочие элементы начинают ее обтекать вплотную и во многих случаях это выглядит некрасиво, поэтому добавляют отступы с помощью свойства "margin y1 x1 y2 x2" . Значения "y1 x1 y2 x2" , это отступы сверху, справа, снизу и слева соответственно.

Некорректное отображение плавающих float элементов

Как писалось выше, плавающие элементы float не учитываются т. к. являются невидимыми для блочных тегов, поэтому возможно некорректное отображение:

1 случай: элемент float выходит за границы родительского слоя.

2 случай: Заголовок и другое содержание в блочном элементе отображается не с новой строки, а начинает обтекать вышестоящий с типом float .

Как исправить некорректное отображение плавающих float элементов

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

В css есть свойство clear отвечающее за запрет обтекания плавающих элементов типа float. Свойство clear смещает элемент сразу под плавающий, тем самым задавая нижнюю границу и расширяя при необходимости родительский блок до окончания всех тегов типа float.

В качестве расширителя границы можно использовать любой блочный тег с указанием clear.

Свойство clear может принимать значения:

• none - разрешить обтекание;
• left - запрет обтекания с левой стороны;
• right - запрет обтекания с правой стороны;
• both - запрет обтекания с обоих сторон.

Чаще всего для расширения границы до конца плавающего блока используется тег
, также можно использовать

без внутреннего содержания.

Выравнивание изображения по левому краю в css

Выровнять изображение по левому краю в css, можно так же как и по правому, только вместо float: right , пишется float: left , а вместо отступа от левого края устанавливается отступ от правого с помощью свойства margin.

Примеры

Пример html кода выравнивания картинки по правому краю в css(clear не нужен)

Результат в браузере

Код страницы(свойство clear не нужно)

В примере выше изображение прижимается к правому краю и имеет отступ слева в 15 px.

Пример html кода как выровнять картинку по правому краю в css(clear необходим для расширения границы)

Результат в браузере

В примере выше свойство "border:4px solid #cccccc;" означает сделать рамку толщиной 4px и цветом #cccccc, а padding:10px это внутренний отступ тега div на 10px.

Пример html кода как выровнять картинку по левому краю в css(clear необходим для расширения границы)

Результат в браузере

Код страницы(со свойством clear)

Птицы

Рыбы

Здесь можно разместить текст...

В примере выше изображение прижимается к левому краю и имеет отступ сверху и справа в 15 px.

Статья 6. Выравнивание текста в HTML странице (по левому краю, по центру, по правому краю и по ширине)

Дата создния: 2009-11-29

1.

Итак, правильно применив "тег-параграф" - , мы можем разместить текст по левому краю, по центру , по правому краю и по ширине страницы. Для этого внутри тега открытия вставляется атрибут align="left", align="center", align="right" или align="justify" соответственно.

В реальности это имеет такой вид:

Текст будет расположен по центру

Текст будет расположен по правому краю

А сейчас давайте применим выравнивание к нашему примеру. Я выровняю по центру слово "Привет!". Для этого выберем .

(Помните, что текст, который расположен внутри тега , будет отделен параграфом снизу и сверху от остального текста. И еще, для того, чтобы стать хорошим дизайнером сайтов, необходимо выучить не только HTML, а и CSS (стили), и много других программ)

Теперь сохраняем документ, обновляем документ в браузере и смотрим, что получилось:

Результат: Слово "Привет!" находится в новом параграфе по центру HTML странички.

(если же мы уберем из параграфа парамерт align="...", то текст по умолчанию станет по левому краю)

2. ...

Вторым способом Вы можете разместить текст только по центру . Но и здесь есть свое преимущество. Заключается оно в том, что текст не будет помещен в параграф. Для этого необходимо поместить его в тег

... .

Это очень просто. Просмотрите изменения нашего примера, и все поймете (для наглядности я убрал тег
после закрывающего тега ):

Теперь сохраним текстовый файл, обновим браузер и посмотрим результат:

Результат: Текст расположен по центру без отступов снизу и сверху.

3. Выравнивание

...

Третий вариант, с помощью которого можно выровнять текст, это теги

.

Записывается он точно так же, как и теги :

- текст будет расположен по центру

- текст будет расположен по левому краю

- текст будет расположен по правому краю

- текст будет расположен по всей ширине страницы

Я, для наглядности, вставлю в пример произвольный текст, и применю к нему выравнивание по ширине, то есть от края до края страницы:

Теперь как обычно, сохраняем текстовый файл, обновляем браузер и смотрим результат:

Результат: Мы видим, что в отличие от тега

Тег