Войти
Меню :
text (37)



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

Как сделать обтекание текста слева!?

Сделаем обтекание текстом слева!? Пример обтекания теста слева.. Разберем обтекание текста не только на блочном и строчном элементах, но и на картинке.

Ранее мы уже рассматривали обтекание текстом, но с другой стороны.

Как сделать обтекание текстом слева!?

  1. Обтекание текстом блочного элемента слева.
  2. Обтекание текстом строчного элемента слева.
  3. Обтекание текстом картинки слева.

  1. Обтекание текстом слева блочного элемента.

    Первым обтеканием текста слева будет обтекание блочного элемента:

    Рассмотрим обтекание текстом слева блочного элемента

    Для того, чтобы текст обтекал слева блочный элемент "div", создадим данный тег вместе с классом "obtekanie_tekstom_sleva"

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

    Добавим стили к данному классу(class), основное свойство для обтекания текстом слева - это "float:right;" :

    <style>
    .obtekanie_tekstom_sleva{
    float:right;/* Положение слева */
    background: #fd0; /* Цвет фона */
    width: 300px; /* Ширина */
    height:100px; /* Высота */
    }
    </style>

    Соберем весь код вместе:

    CSS:

    .obtekanie_tekstom_sleva{

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

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

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

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

    }

    Html :
    <div class="obtekanie_tekstom_sleva">Класс - obtekanie_tekstom_sleva</div>

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

    Класс - obtekanie_tekstom_sleva

    Вместе с этим текстом, весь отсальной текст находиться физически ниже нашего блока, который мы должны обтечь текстом слева.

    Вообще, любой элемент, который будет находиться рядом с блоком, со свойством "float: right;" будет вести себя не совсем стандарно.


  2. Обтекание текстом строчного элемента слева.

    Выше идет пример "обтекание текстом слева" блочного элемента.

    Теперь давайте используем строчный элемент span

    Новый класс "obtekanie_tekstom_sleva_1".

    Который будет похож на обтекание теста слева на выше приведенный пример, только добавим еще margin слева "margin-left: 10px;"

    <span class="obtekanie_tekstom_sleva_1">Класс - obtekanie_tekstom_sleva_1</span>

    Соберем весь код вместе:

    HTML :

    <span class="obtekanie_tekstom_sleva_1">Класс - obtekanie_tekstom_sleva_1</span>

    CSS :

    .obtekanie_tekstom_sleva_1{

    float: right;

    background: #fd0;

    width: 300px;

    height: 100px;

    margin-left: 10px;

    }

    Результат обтекания текстом слева строчного элемента :

    Здесь находится текст , который выше блока - физически..

    Класс - obtekanie_tekstom_sleva_1 + margin

    Обтекающий текст слева, мы расположим ниже строчного элемента, который мы должны применить обтекание текстом слева.

    Со слов "Обтекающий текст слева", который покрашен в красный цвет, он весь расположен ниже строчного элемента.

    И как вы наверное заметили, что различия между обтеканием текстом слева блочного или строчного элемента не отличается ничем!


  3. Обтекание текстом картинки слева.

    Следующим рассмотрим "обтекание слева текстом" картинки. Возьмем картинку лого: :

    Нам нужно, чтобы данную картинку обтекал текст слева, не только одна строка, а весь текст обтекал его слева.

    Для обтекания текстом слева нам понадобится :

    Берем нашу подопытную картинку, которую будем обтекать текстом слева + добавим класс "obtekanie_tekstom_sleva_2"

    <img class="obtekanie_tekstom_sleva_2" src="https://dwweb.ru/__img/__dates/logo.png">

    Добавим стили к нашему классу :

    <style>
    img.obtekanie_tekstom_sleva_2{
    margin: 4px 20px 4px;
    border: 2px solid #e2e2e2;
    float: right;
    }
    </style>

    Соберем весь код вместе:

    Html:
    <img class="obtekanie_tekstom_sleva_2" src="https://dwweb.ru/__img/__dates/logo.png">
    Css:
    <style>
    img.obtekanie_tekstom_sleva_2{
    margin: 4px 0px 4px 20px;
    border: 2px solid #e2e2e2;
    float: right;
    }
    </style>

    Результат обтекания текстом слева картинки.

    Для того, чтобы увидеть обтекание слева текстом картинки нам нужен пример - этот текст выше картинки.

    И далее нам нужен текст, который ниже картинки и он будет обтекать картинку слева

    Чтобы посмотреть в коде нажмите исследовать элемент

    margin: 4px 0px 4px 20px; - данное свойство margin добавил, чтобы текст не прилипал к нашей картинке : "верх, слева, низ, слева"

Не стесняемся говорить спасибо!
О комментах : 05.11.2024
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Друзья! Пожалуйста держите себя в рамках приличия!
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
Помочь проекту DwWeb.ru

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

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

Теги:
обтекание слева обтекание текста слева обтекание картинки слева обтекание слева css
На сайте сейчас :
dwweb.ru есть здесь:
Все соцсети в одном месте!
Разное :Игра "пятнашки"
Угадай страну по флагу

Кальклятор
Математика онлайн

Списки шифрования
Часы

Числа словами
Названия чисел(max=10305)
Графики

Qr код онлайн

Как сделать сайт?
Md5 онлайн
Sitemap.html
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Лучший хостинг : RUWEB + помощь по RUWEB Сайт работает круглосуточно 24/7.
Страница загружена за : 0.02272 секунд.