DWWEB.RU
СКРИПТЫ

div справа

Сегодня займёмся позиционированием div справа.

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

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

.sprava{

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

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

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

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

}

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

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

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

Класс - sprava

Обратите внимание, что код с дивом <div class="sprava">Класс - sprava</div> - стоит после слов

«Смотрим, что мы получили:» и… как-то непонятно ведет себя блок.

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

И ещё!

Если мы применяем свойство  float, то оно действует внутри дива или таблицы, что мы собственно и наблюдаем, див не может сдвинуться ещё направо, потому, что там есть граница другого дива.

Но как, к примеру сдвинуть div  направо, если у нас есть такая задача!

2.

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

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

И класс:

.sprava-2{

margin-left: 770px;

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

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

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

}

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

+ Обратите внимание на поведение самого блока, он находится почти за краем правой границы, для разрешения монитора 1600 по горизонтали - это не ошибка, числом 770px - можно регулировать отстояние от левого каря родительского элемента.

И так же обращаю ваше внимание на то, что блок показывается я бы сказал очень странно! Вопрос почему!?

Ваши объяснения жду в коментах…

Класс - sprava-2

Мы сдвинули див вправо с помощью свойства margin, добавим положение margin-left и отодвинемся от левого края данной строки на 770 пикселей.

Почему мы применили margin-left, а например не  свойство   margin-right?

Ваши предположения!?

3.

Еще один вариант можно сделать таким образом... уберем цвет и поставим бордюр...

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

position: absolute;

right: 0px;

width: 300px;

height: 300px;

text-align: center;

border: 1px solid #2c2828;

}

Для разных целей нужно и можно использовать разный код… Если мы сейчас поострим блок, то он находится справа, но не выходя за пределы родительского дива + он никак не влияет на текст, который идет ранее – он просто каждый раз бюджет сдвигаться ниже…

Если же здесь мы напишем текст после блока, то увидим, что… как будто блока вообще нет.. И если бы мы оставили цвет, то часть текста вы не смогли бы увидеть. Потому что он спрятался под блоком, поэтому мы и убрали цвет…

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

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

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019