Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

Сегодня займёмся позиционированием div справа.Рассмотрим положение блока справа в разных ситуациях и с разными стилями!

Свойство блока float со значением right. Свойство right со значением 0.

О позиционировании блока div справа.

  1. Позиция div справа float + right. + Обтекание div справа.
  2. Div расположен справа свойство float без обтекания.
  3. Div справа с помощью свойства margin-left
  4. Div справа в крайней правой точке монитора
  5. Div справа в крайней правой точке родительского блока
  6. Div справа в крайней правой и верхней точке

Ещё :

  1. Позиция блока справа свойство float со значением right

    Если вы используете свойство "float" со значением "right" - без дополнительных свойств, то получится блок с обтеканием.

    Поставим свойство - float и положение справа –right.

    Код получится:

    .sprava{

    float:right;/* Положение справа */

    background: #fd0; /* Цвет фона */

    width: 300px; /* Ширина */

    height:300px; /* Высота */

    }

    Далее создадим div, присвоим ему класс, который описали сверху. И напишем в  самом диве текст -  Класс - sprava.

    <div class="sprava">Класс - sprava</div>

    Смотрим, что мы получили:

    Этот текст написан выше блока.

    Класс - sprava

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

    И как только текст заполнит всю высоту, блока, который находится справа, то текст будет уже заполнять всю ширину родительского блока.

  2. Div расположен справа свойство float без обтекания.

    Предположим, что мы хотим поставить div справа с помощью float, но без обтекания текстом!

    Самое простое, с моей точки зрения, поместить наш див с классом "sprava" в другой див, который будет иметь аналогичную высоту, что и класс sprava, т.е. 100px.

    И добавим нашему наружному блоку "border: 1px solid;", чтобы мы его смогли увидеть!

    Класс - sprava, но внутри второго блока с height =100px;

    У нас получится:

    HTML :
    <div class="height_300">
    <div class="sprava">Класс - sprava, но внутри наружного блока с height =100px;</div>
    </div>
    Стили:
    .height_300 {
    height: 100px;
    border: 1px solid;
    }

    Результат расположения блока справа:

    Как видим, наш блок расположился справа, и текст, который написан ниже, и расположился ниже блока.

  3. Div справа с помощью свойства margin-left

    Есть свойство margin-left, мы можем расположить div справа

    Создадим ещё раз новый див. С новым классом.

    Родительский блок имеет ширину 740px, и поставим в свойствах "margin-left =740px".
    <div class="sprava-2">Класс - sprava-2</div>

    И класс:

    .sprava-2{

    margin-left: 740px;

    background: #fd0; /* Цвет фона */

    width: 300px; /* Ширина */

    height:300px; /* Высота */

    }

    Смотрим, что получилось:

    Класс - sprava-2
    Обратите внимание на поведение блока, он находится за краем правой границы, для разрешения монитора 1600 по горизонтали - почему данный блок вышел ровно за край родительского блока, мы предполагали, что он будет располагаться справа, но нет...
    В чем ошибка!?

    Дело в том. что мы не учли точку отсчета по умолчанию, а она располагается в верхнем левом углу. Нашего блока...

    Поэтому, нам нужно отнять от 740 ширину нашего блока 300 - и поставить её в свойство "margin-left".

    740 -300 = 440.

    Класс - sprava-2_1
    .sprava-2_1 {
    margin-left: 440px;
    background: #fd0;
    width: 300px;
    height: 100px;
    }

    Как видим, наш блок справа не зашел за края родительского блока.

  4. Div справа в крайней правой точке монитора

    Предположим, что вам нужно поставить div справа, максимально справа, чтобы он упирался в правый корай окна браузера...

    Создадим новый блока и новый класс:

    <div class="sprava_3"> </div>
    .sprava_3 {

    position: absolute;

    right: 0px;

    width: 300px;

    height: 300px;

    background: #fd0;

    }
    Свойство "right" будет работать только в том случае, если м поставим position: absolute;
    Блок находится в максимально правой стороны. Дальше, край окна браузера.

    Данный блок будет находится по горизонтали на этих словах, но никак не будет влиять на него.!

    Если вы уменьшите размер окна, до менее чем 740(ширина родительского блока), то блок наедет на текст.

    Когда данный блок будет наезжать на основной блок с текстом?!

    Сделаем скрин, когда размер экрана меньше 1080 и поставим родительскому блоку "border", чтобы мы могли его увидеть.

    Если вы читали внимательно, то должны были заметить, что цифры не бьется...

    Главный блок "div id="main_text"" = 740px.

    Прибавляем 300px - ширину нашего блока справа 740 + 300 = 1040, а на скрине 1080... где еще 40 px?

    Дело в том, что у "main_text" есть дополнительные 20px отступа с каждой стороны, вот 20 + 20 - 40.

    Поэтому, как только ширина окна будет меньше 1080, наш блок будет наезжать на основной блок "main_text".

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Когда данный блок будет наезжать на основной блок с текстом?!

  5. Div справа в крайней правой точке родительского блока

    Когда мы рассматривали позицию блока справа с помощью "margin-left: 440px;", но если ваш родительский блок имеет резиновую ширину, то этот блок справа, будет уезжать вправо, при уменьшении основного и влево при увеличении.

    Смотрим на скрине :

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Div справа в крайней правой точке родительского блока
    Кстати - этой болезнью не страдает вариант №2

    И далее следующий вариант, блок будет находиться справа, в любой ситуации.

    Div справа с помощью свойства right

    Возьмем данные из предыдущего блока... и поместим его в другой блок и задаем ему свойства:

    .relative {

    position: relative;

    height: 300px;

    }

    Смотрим, что у нас получилось:

    Класс sprava_3 + наружный блок с position: relative;
    HTML:

    <div class="relative">

    <div class="sprava_3">Класс sprava_3 + наружный блок с position: relative;</div>

    </div>

    CSS

    .sprava_3 {

    position: absolute;

    right: 0px;

    background: #fd0;

    width: 300px;

    height: 100px;

    text-align: center;

    }

    .relative {

    position: relative;

    height: 300px;

    }

  6. Div справа в крайней правой и верхней точке

    Предположим, что вам требуется разместить блок справа и сверху. И его(блок) надо зафиксировать в этом положении. М чтобы блок никак не менял своего положения!

    Давайте сделаем это:

    Html :

    <div class="sprava_0_sverhu_0 ">Класс sprava_0_sverhu_0 + всегда справа и всегда сверху </div>

    напишем свойства...

    Css:

    .sprava_0_sverhu_0 {

    width: 300px;

    height: 53px;

    background: #fff900;

    position: fixed;

    top: 0px;

    right: 0px;

    padding: 5px;

    font-size: 12px;

    }

    Результат:

    Естественно, что здесь вы ничего не увидите. потому, что данный блок находится в крайней правой точке и крайней верхней.

    Класс sprava_0_sverhu_0 + всегда справа и всегда сверху пункт 6


Вас может еще заинтересовать список тем : #HTML | #CSS |
Последняя дата редактирования : 2020-11-27 12:14
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
div справа div обтекание слева как div расположить справа выравнивание div справа html div справа блок div справа div справа страницы разместить div справа div справа в header div обтекание с права

Последние комментарии :
Марат :
26/01/2021 12:28
Внимание! На странице описывается система комментирования ECOMMENT.SU.Здесь и далее, на всем сайте, стоит другая…
подробнее.
Марат :
26/01/2021 10:58
На сайте, комментирование моё собственное, которое не знаю, когда …
подробнее.
Вали :
26/01/2021 05:51
А вот эти комментарии тут - это же другие, не те о которых статья?Не…
подробнее.
Вали :
26/01/2021 05:44
Привет, классно!
подробнее.
Марат :
25/01/2021 10:08
Спасибо за добрые слова!Всегда пожалуйста!Приходите…
подробнее.