Copy Source | Copy HTML
- < div class ="wrap">
- < div class ="left">< a href ="#"> Левый блок a > div >< div class ="right">< a href ="#"> Правый блок a > div >
- div >
Copy Source | Copy HTML
- .wrap {
- width : 500px ;
- background : #555 ;
- height : 500px ;
- .left , .right {
- display : inline -block ;
- //display: inline;
- //zoom: 1;
- width : 100% ;
- margin-right : -100% ;
- vertical-align : bottom ;
- .right {
- text-align : right ;
- .left a , .right a { display : inline -block ; position : relative ; }
- .left a { width : 200px ; height : 100px ; background : green ; }
- .right a { width : 100px ; height : 200px ; background : pink ; }
В разделе на вопрос CSS: как выровнять блок (div) по правому краю? заданный автором Малосольный
лучший ответ это можно так
__
9.5.1 Позиционирование перемещаемого объекта: свойство "float"
"float"
Значение: left right none inherit
Начальное значение: none
Область применения: все перемещаемые объекты и генерируемое содержимое
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования
Данное свойство определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Оно может устанавливаться для элементов, порождающих блоки, не являющиеся абсолютно позиционируемыми. Значения данного свойства имеют следующий смысл:
left
Элемент порождает структурный блок, перемещаемый влево. Содержимое выводится вдоль правой стороны блока, начиная с самого верха (за счет свойства "clear"). Свойство "display" игнорируется, если ему не присвоено значение "none".
right
Подобно значению "left" с той лишь разницей, что содержимое выводится вдоль левой стороны блока, начиная с самого верха.
none
Блок не перемещается.
Ответ от Кирилл просто Кирилл
[гуру]
float: rightв коде выглядит так ССS.название класа{float: right}
Ответ от Еммануил Голдстейн
[гуру]
#твой_id {float: right;width: твой_размер; (поддерживается в процентах)height: твой_размер; (поддерживается в процентах) }
Ответ от россказни
[активный]
margin-left: auto предпочтительнее - не потребуется сброс обтекания после блока.
Ответ от Двутавровый
[новичек]
без всяких классов 🙂 div align="right"
Длинный абзац с несколькими предложениями. Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.
Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.
Не наследуется, применяется ко всем элементам. вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static , с помощью свойств top , right , bottom , left . При direction: ltr; свойство left имеет приоритет над свойством right , кроме случаев, когда свойство left имеет значение auto .
text-align
наследуется, применяется к блочным элементам. right
, позволяющих сдвигать содержимое вправо.margin-left
не наследуется, применяется ко всем элементам. У него есть значение auto
, которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto;
прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right
..html">При margin-left: auto;
и margin-right: auto;
элемент размещается по центру ширины предка.float
не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.position
не наследуется, применяется ко всем элементам. position: absolute;
вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position
отлично от static
, с помощью свойств top
, right
, bottom
, left
. При direction: ltr;
свойство left
имеет приоритет над свойством right
, кроме случаев, когда свойство left
имеет значение auto
.display
не наследуется, применяется ко всем элементам..html">тегу table
, а table-cell
— td
.Короткий текст справа
Элемент не влияет ни на высоту, ни на ширину родителя, не вызывает его переполнения.
Элемент не влияет на высоту родителя, если не очистить float .
К текстовым элементам можно применять свойство vertical-align . Но оно производит вертикальное выравнивание не относительно внешнего элемента, а относительно его базовой линии. Поэтому для выравнивания текста это свойство использовать не удобно.
Свойства text-align и vertical-align можно использовать для выравнивания внутри ячеек таблицы. Для ячеек vertical-align принимает такие значения:
vertical-align: middle - по центру (значение по умолчанию)
vertical-align: top - по верхнему краю
vertical-align: bottom - по нижнему краю
Это свойство производит вертикальное выравнивание всего содержимого ячейки, включая текстовые и блочные элементы. А text-align применяется только к тексту. Пример:
Стиль:
11 |
td { border: 1px solid Red; width: 200px; height: 180px; } |
HTML код:
Если какому-то отступу установить значение auto , то отступ займёт всё доступное пространство. Это позволяет расположить блок справа. А если это значение указать левому и правому отступу, то пространство делится между ними пополам, и блок оказывается в центре.
В данной статье рассмотрим как выровнять картинку по правому и левому краю средствами css на сайте.
Для выравнивания изображения по правому краю используется свойство "float:right" . Свойство float меняет вид отображения картинки(или другого элемента) на блочный, но с особенностями: она становится невидимой для других блочных элементов, но при этом сохраняет видимость для строчных (display:inline), которые ее обтекают.
Эта особенность позволяет выровнять изображение по правому и левому краю в css, а также другие элементы по краю без использования таблиц и большого количества лишнего кода. Подробную информацию как работает это свойство можно найти в поисковых системах по запросу "float css".
Когда картинка сместилась, то текст и прочие элементы начинают ее обтекать вплотную и во многих случаях это выглядит некрасиво, поэтому добавляют отступы с помощью свойства "margin y1 x1 y2 x2" . Значения "y1 x1 y2 x2" , это отступы сверху, справа, снизу и слева соответственно.
Как писалось выше, плавающие элементы float не учитываются т. к. являются невидимыми для блочных тегов, поэтому возможно некорректное отображение:
1 случай: элемент float выходит за границы родительского слоя.
2 случай: Заголовок и другое содержание в блочном элементе отображается не с новой строки, а начинает обтекать вышестоящий с типом float .
Для решения описанной выше проблемы, нужно указать границы завершения плавающего элемента. Поскольку плавающие элементы невидимы для блочных, нужно использовать дополнительный тег, который не будет их обтекать.
В css есть свойство clear отвечающее за запрет обтекания плавающих элементов типа float. Свойство clear смещает элемент сразу под плавающий, тем самым задавая нижнюю границу и расширяя при необходимости родительский блок до окончания всех тегов типа float.
В качестве расширителя границы можно использовать любой блочный тег с указанием clear.
Свойство clear может принимать значения:
Чаще всего для расширения границы до конца плавающего блока
используется тег
, также можно
использовать
без внутреннего содержания.
Выровнять изображение по левому краю в css, можно так же как и по правому, только вместо float: right , пишется float: left , а вместо отступа от левого края устанавливается отступ от правого с помощью свойства margin.
Результат в браузере
Код страницы(свойство clear не нужно)
В примере выше изображение прижимается к правому краю и имеет отступ слева в 15 px.
Результат в браузере
В примере выше свойство "border:4px solid #cccccc;" означает сделать рамку толщиной 4px и цветом #cccccc, а padding:10px это внутренний отступ тега div на 10px.
Результат в браузере
Код страницы(со свойством clear)
Здесь можно разместить текст...
В примере выше изображение прижимается к левому краю и имеет отступ сверху и справа в 15 px.