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

div справа

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

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

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

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

  1. Позиция блока справа свойство float со значением right.
  2. Div расположен справа свойство float без обтекания.
  3. Div справа с помощью свойства margin-left
  4. Div справа в крайней правой точке монитора
  5. 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;

    }


Вас может еще заинтересовать список тем : #HTML | #CSS |
Последняя дата редактирования : 2020-10-21 23:47
//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

Последние комментарии :
Марат :
21/10/2020 12:15
Поиск по словам... м...м... может быть... не задумывался... в принципе скрипт поиска есть, надо подумать, как это…
подробнее.
Anton :
21/10/2020 09:29
Как добавить картинку (с ПК), видео (с хостинга или ПК) ?Будет ли поиск по словам в комментариях…
подробнее.
Марат :
15/10/2020 03:29
Сегодня нам дали очередную десяточку к "ИКС" - у, теперь…
подробнее.
Марат :
15/10/2020 03:16
Здравствуйте. Первое, что на ум пришло по вашему вопросу:Найти первое повторяющееся слово и выделить…
подробнее.
Майя :
15/10/2020 11:14
Добрый день, не могли бы вы подсказать, как выделить только первое или, например , только второе одинаковое…
подробнее.