В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
css (131)
html (147)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

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

Div справа или как расположить элемент "Dom"-a справа. Положение блока справа в разных ситуациях и с разными стилями!

Свойство блока 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;

    }

    .sprava {

    float: right;

    background: #fd0;

    width: 300px;

    height: 100px;

    text-align: center;

    }

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

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


  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 по горизонтали - почему данный блок вышел ровно за край родительского блока, мы предполагали, что он будет располагаться справа, но нет...

    В чем ошибка!?

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

    Ширина родительского блока = 700

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

    700 -300 = 400.

    Стили для блока справа, но в родительском блоке.

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

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


  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
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.019893 секунд. Подробнее