Div слева css: Как поставить div справа, обтекание, пример

float | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 3.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам (за исключением абсолютно позиционированных)
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-float

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

float: left | right | none | inherit

Значения

left
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста,
обтекают его по правой стороне.
right
Выравнивает элемент по правому краю, а все остальные элементы обтекают его
по левой стороне.
none
Обтекание элемента не задается.
inherit
Наследует значение родителя.

Пример

HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>float</title>
  <style>
   .layer1 {
    float: left; /* Обтекание по правому краю */
    background: #fd0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 10px; /* Поля вокруг текста */
    margin-right: 20px; /* Отступ справа */
    width: 40%; /* Ширина блока */
   }
  </style>
 </head> 
 <body> 
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  </div>
  <div>
   Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
   illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
   dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
   feugat nulla facilisi.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства float

Объектная модель

[window.]document.getElementById(“elementID”).style.styleFloat

[window.]document.getElementById(“elementID”).style.cssFloat

Браузеры

В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Форматирование

position – CSS | MDN

Свойство CSSposition указывает, как элемент позиционируется в документе. top, right, bottom и left (en-US) определяют конечное местоположение позиционированных элементов.

Типы позиционирования

  • Позиционируемый элемент — это элемент, у которого вычисленное значение position является relative, absolute, fixed либо sticky. (Другими словами, это все, кроме static.)
  • Относительно позиционируемый элемент является элементом, вычисленное значение position которого является relative. Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left (en-US) и right задают горизонтальное смещение.
  • Абсолютно позиционируемый элемент — это элемент, чьё вычисленное значение position является absolute или fixed. top, right, bottom и left (en-US) задают смещения от краёв содержащего блок элемента. (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
  • Элемент с липкой позицией — это элемент, у которого значение вычисленного position является sticky. Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечёт указанный порог (например, установка top в значение, отличное от auto) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока.

В большинстве случаев абсолютно позиционированные элементы, которые имеют height и width установленные в auto, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как top, так и bottom, и оставляя height неопределённым (то есть , auto). Ими также можно заполнить доступное горизонтальное пространство, указав как left (en-US), так и right, и оставляя width как auto.

За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):

  • Если указаны top и bottom (технически, не auto) — приоритет будет у top.
  • Если указаны left и right: приоритет будет у left, когда direction ltr (английский язык, горизонтальный японский и т. д.), приоритет будет у right, когда direction является rtl (персидский , Арабский, иврит и т. д.).

Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

static

Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.

relative

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static. Это значение создаёт новый контекст наложения, когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.

absolute

Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создаётся пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного содержащего блока. Его конечная позиция определяется значениями top, right, bottom, и left.Это значение создаёт новый контекст наложения, когда значение z-index не auto. Поля абсолютно позиционированных коробок не сворачиваются с другими полями.

fixed

Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного содержащего блока, установленного viewport, за исключением случаев, когда один из его предков имеет свойство transform, perspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top, right, bottom и left.Это значение всегда создаёт новый контекст наложения. В печатных документах элемент помещается в одно и то же положение на каждой странице.

sticky

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left. Смещение не влияет на положение любых других элементов.Это значение всегда создаёт новый контекст наложения. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow равном hidden, scroll, auto или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

Формальный синтаксис

position = 
static | (en-US)
relative | (en-US)
absolute | (en-US)
sticky | (en-US)
fixed | (en-US)
running( )

Относительное позиционирование

Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.

HTML
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
CSS
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}
#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

Абсолютное позиционирование

Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является static). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок – см. также определение W3C), который содержит блок корневого элемента документа.

Простой пример:

<h2>Абсолютное позиционирование</h2>
<p>Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.</p>
<p>По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы.</p>
<p>Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих.</p>
<p>встроенные элементы <span>как этот</span> и <span>вот этот</span> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов <span>перейдёт на новую строку, если это возможно, - как содержимое этого текста</span>, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:<img src="long. jpg"></p>
body {
  width: 500px;
  margin: 0 auto;
}
p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}
span {
  background: red;
  border: 1px solid black;
}
.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Фиксированное позиционирование

Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было transform, perspective, или свойства filter, отличное от none (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c id="one" фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

HTML
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus.  Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim.
    Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet.
    Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.
    Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p>
  <div>One</div>
</div>
CSS
.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 500px;
  overflow: scroll;
  padding-left: 150px;
}

Липкое позиционирование

Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например…

#one { position: sticky; top: 10px; }

… позиционирует элемент с id “one” относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

Типичное использование для липкого позиционирования – для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.

Вы должны указать порог с по крайней мере одним из top, right, bottom, или left (en-US) для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования.

HTML
<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>
CSS
* {
  box-sizing: border-box;
}
dl {
  margin: 0;
  padding: 24px 0 0 0;
}
dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}
dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}
dd + dd {
  border-top: 1px solid #CCC;
}

Убедитесь, что элементы, расположенные с absolute или fixed значением, не затеняют другой контент при увеличении страницы, увеличивая размер текста.

  • MDN Understanding WCAG, Guideline 1.4 explanations
  • Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0

Производительность и доступность

Элементы прокрутки, содержащие fixed или sticky контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать sticky или fixed контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление will-change: transform к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.

Спецификация Статус Коммент
CSS Level 2 (Revision 1)
Определение ‘position’ в этой спецификации.
Рекомендация
CSS Positioned Layout Module Level 3
Определение ‘position’ в этой спецификации.
Рабочий черновик Добавляет значение свойства sticky

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

CSS оставил свойство

❮ Предыдущий
Полное руководство по CSS
Далее ❯

Пример

Установите левый край позиционированного элемента

на расстоянии 150 пикселей от левого края его ближайшего позиционированного предка:

div.c {
  position: absolute;
  осталось:
150 пикселей;
  ширина: 200 пикселей;
 высота: 120 пикселей;
  граница: 3 пикселя сплошная
зеленый;
}

Попробуйте сами »

Другие примеры “Попробуйте сами” ниже.


Определение и использование

Свойство left влияет на горизонтальное
положение позиционируемого элемента. Это свойство не влияет на непозиционированные
элементы.

  • Если положение: абсолютное; или положение: фиксированное; –
    Свойство left
    устанавливает левый край элемента на единицу слева от
    левый край его ближайшего расположенного предка.
  • Если положение: относительное; – осталось
    Свойство устанавливает левый край элемента на единицу слева/справа от его
    нормальное положение.
  • Если положение: липкое; – свойство left ведет себя так, как будто его позиция
    относительный, когда элемент находится внутри области просмотра, и, как и его положение,
    фиксируется, когда он снаружи.
  • Если позиция: статическая; – свойство left не действует.

Показать демо ❯

Значение по умолчанию: авто
Унаследовано: нет
Анимация: да. Читать про анимированный
Попробуй
Версия: CSS2
Синтаксис JavaScript: объект .style.left=”100px”
Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
слева 1,0 5,5 1,0 1,0 5,0


Синтаксис CSS

left: auto| длина |начальный|наследовать;

Значения свойств

Значение Описание Демо
авто Позволяет браузеру вычислить положение левого края. Это по умолчанию Демонстрация ❯
длина Устанавливает положение левого края в пикселях, см и т. д. Допускаются отрицательные значения. Читать о единицах длины Демонстрация ❯
% Устанавливает позицию левого края в % от содержащего элемента. Допускаются отрицательные значения Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Другие примеры

Пример

Используйте свойство left с отрицательным значением и для элемента без
позиционированные предки:

div.b {
  позиция: абсолютная;
  слева: -10 пикселей;
  ширина: 100 пикселей;
высота: 120 пикселей;
  граница: 3 пикселя сплошного синего цвета;
}

div. c {
  position: absolute;
слева: 150 пикселей;
  ширина: 200 пикселей;
высота: 120 пикселей;
  граница: 3 пикселя сплошного зеленого цвета;
}

Попробуйте сами »


Связанные страницы

Учебник CSS: Позиционирование CSS

Ссылка CSS: свойство right

❮ Предыдущий
Полное руководство по CSS
Далее ❯

ВЫБОР ЦВЕТА



Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery 902 Top 92 Reference 902

9008
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

html – Позиционирование div слева и справа внутри другого div

спросил

Изменено
5 лет, 11 месяцев назад

Просмотрено
33 тысячи раз

Я новичок в css и html, и у меня возникают проблемы с размещением div внутри другого div,
Я провел довольно много исследований в Интернете, но не смог найти решение.

это сайты, которые я читал и где они бесполезны:

елефитц /screencast/html-training/css/positioning/

stackoverflow /questions/580195/css-layout-2-column-fixed-fluid

mirificampress /show.php?id=106

Как заставить плавающие DIV внутри DIV с фиксированной шириной продолжаться горизонтально?

Мой код можно найти на jsFiddle здесь

  • html
  • css
  • css-float
  • позиционирование

2

Надеюсь, это поможет.
CSS:

 #слева, #справа {
 ширина: 100 пикселей; // изменяем это на то, что требуется
 плыть налево;
}
 

HTML:

 
<дел>

Лорум исум слева

<дел> <дел>

своеобразное право

<дел> <дел>

2

Так как вы новичок. Я сделаю это прямо вперед. Ниже приведено извлечение вашего кода. Я использовал внутреннюю таблицу стилей. В вашем примере вы используете внешнюю таблицу стилей.
Используя атрибут float, вы можете установить его влево и вправо. Здесь используется float:left, чтобы подсветить один div слева, и float:right, чтобы подсветить другой справа.
Каждый открытый тег должен быть закрытым тегом.

 <голова>
    
    
    <стиль>
    .левый{
    плыть налево;
    }
    .верно{
    поплавок: справа;
    }
    
    <тело>
    <дел >
        <дел>
            

Лорум исум слева

<дел>

своеобразное право