Position:absolute и обтекание

@Vydr · Регистрация: 24.10.2017

Студворк — интернет-сервис помощи студентам

Приветствую. Появилась задача, которую не удается решить.

Есть страница с текстом, в которую нужно вставить абсолютно позиционированный div. Проблема возникает или при сочетании position:absolute + float, или position:relative + top: 200px

Гугл решения не подсказал, хотя странно. Вроде распространенная должна быть задача.

HTML5
1
2
3
4
5
<div style="position: relative;">
<div style="width: 200px; height: 200px; float: right; top: 200px; position: absolute;">
</div>
много текста
</div>

@mrtoxas · 24.10.2017, 14:31

Гугл не подсказал, и тут вы его не найдете

Это даже логически сложно представить.
Когда мы задаем элементу абсолютное позиционирование, мы "вырываем" его из общего потока документа, и другие элементы перестают "видеть" этот элемент.

@Vydr · 24.10.2017, 14:40 **[ТС]**

Я понимаю проблему с css и убиранием абсолютно позиционированного блока из потока. Я прошу помощи: может есть другие варианты решить поставленную задачу? Может есть решение для position:relative, чтоб сместить его вниз и обтекание было с трех сторон блока?

@mrtoxas · 24.10.2017, 14:43

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

@Vydr · 24.10.2017, 15:06 **[ТС]**

Вот на этой странице есть блок Новости Рамблера
https://www.gazeta.ru/social/2... 3692.shtml

На Газете он вставляется перед определенным абзацем. У них это решается, скорее всего, программно, подсчетом абзацев, например. Я хочу попробовать решить методами css.

@mrtoxas · 24.10.2017, 15:28

Не решите.

@Vydr · 24.10.2017, 15:42 **[ТС]**

Не убивайте мой оптимизм на корню. Вдруг появится гений css и подскажет простейшее решение

@mrtoxas · 24.10.2017, 15:47

Vydr, да, конечно, я лишь высказал свое мнение.

Qwerty_Wasd · 24.10.2017, 16:26

Vydr,

Сообщение от Vydr

Газете он вставляется перед определенным абзацем

да не вставляется он. Просто виджет с параграфом, а вот уже сам контент виджета парсится с рамблера. Ну и в чем же сложность поставить див рядом с <p> и генерить в него чего хочется?

Добавлено через 6 минут
Вот то что сделано у них(грубый вариант, красиво сами сделаете) - Песочница

HTML5
1
<div id="Adcenter_Vertical" style="position: relative; display: block;"><div class="b-white sausage"><div class="sausage-header "> Новости Рамблера</div><ul class="sausage-list"><div class="partner_material_item"><a href="https://api.rnet.plus/Service/TeaserClicked?block_id=184&amp;user_id=57a0d5d6-2d15-be8a-4dd5-8d3eca997f7a&amp;count_jump=true&amp;teaser_id=296553&amp;flight_id=451&amp;orig_url=https%3a%2f%2fnews.rambler.ru%2fhead%2f38217984-belosnezhki-bolshe-net-v-donetske-ubili-devushku-givi%2f%3f_openstat%3d%253B%253Bincidents_topday%253B%26utm_campaign%3dnews_incidents_topday%26utm_source%3dgazetaru%26utm_medium%3dexchange%26utm_campaign%3dnews%26_openstat%3dgazetaru%3bexchange%3bnews%3b" target="_blank"><img class="x80_80" src="https://api.rnet.plus/Service/TeaserImage?block_id=184&amp;user_id=57a0d5d6-2d15-be8a-4dd5-8d3eca997f7a&amp;teaser_id=296553&amp;flight_id=451&amp;orig_url=https%3a%2f%2fstatic.rnet.plus%2f8E%2f56%2f63%2f80x80_9f12222e-fd54-4541-a703-baf6de3e21f5.png"> <div class="partner_material_item_text "><span class="partner_material_item_text_value ">«Белоснежки» больше нет: в&nbsp;Донецке убили «девушку Гиви»</span></div><div style="clear: both"></div></a></div><div class="partner_material_item"><a href="https://api.rnet.plus/Service/TeaserClicked?block_id=184&amp;user_id=57a0d5d6-2d15-be8a-4dd5-8d3eca997f7a&amp;count_jump=true&amp;teaser_id=293999&amp;flight_id=451&amp;orig_url=https%3a%2f%2fnews.rambler.ru%2fincidents%2f38202659-direktor-kliniki-rasskazala-o-lechenii-maryanova%2f%3f_openstat%3d%253B%253Bincidents_topday%253B%26utm_campaign%3dnews_incidents_topday%26utm_source%3dgazetaru%26utm_medium%3dexchange%26utm_campaign%3dnews%26_openstat%3dgazetaru%3bexchange%3bnews%3b" target="_blank"><img class="x80_80" src="https://api.rnet.plus/Service/TeaserImage?block_id=184&amp;user_id=57a0d5d6-2d15-be8a-4dd5-8d3eca997f7a&amp;teaser_id=293999&amp;flight_id=451&amp;orig_url=https%3a%2f%2fstatic.rnet.plus%2f4B%2f3C%2f54%2f80x80_b8d1fabf-5cea-4a67-8ae4-f02239ee103e.jpg"> <div class="partner_material_item_text "><span class="partner_material_item_text_value ">Директор лечебницы для&nbsp;наркоманов о&nbsp;проблемах Марьянова</span></div><div style="clear: both"></div></a></div><div class="partner_material_item"><a href="https://api.rnet.plus/Service/TeaserClicked?block_id=184&amp;user_id=57a0d5d6-2d15-be8a-4dd5-8d3eca997f7a&amp;count_jump=true&amp;teaser_id=295313&amp;flight_id=451&amp;orig_url=https%3a%2f%2fnews.rambler.ru%2fhead%2f38210746-stalo-izvestno-kto-pomeshal-spasti-zhizn-maryanovu%2f%3f_openstat%3d%253B%253Bincidents_topday%253B%26utm_campaign%3dnews_incidents_topday%26utm_source%3dgazetaru%26utm_medium%3dexchange%26utm_campaign%3dnews%26_openstat%3dgazetaru%3bexchange%3bnews%3b" target="_blank"><img class="x80_80" src="https://api.rnet.plus/Service/TeaserImage?block_id=184&amp;user_id=57a0d5d6-2d15-be8a-4dd5-8d3eca997f7a&amp;teaser_id=295313&amp;flight_id=451&amp;orig_url=https%3a%2f%2fstatic.rnet.plus%2fE1%2f85%2fF8%2f80x80_92c2c85a-cb41-4857-99d5-741881caa770.jpg"> <div class="partner_material_item_text "><span class="partner_material_item_text_value ">Спасти жизнь Марьянову помешали полицейские</span></div><div style="clear: both"></div></a></div><div class="partner_material_item"><a href="https://api.rnet.plus/Service/TeaserClicked?block_id=184&amp;user_id=57a0d5d6-2d15-be8a-4dd5-8d3eca997f7a&amp;count_jump=true&amp;teaser_id=293992&amp;flight_id=451&amp;orig_url=https%3a%2f%2fnews.rambler.ru%2fincidents%2f38192009-mazhorke-na-lexus-prigrozili-maksimalnym-srokom%2f%3f_openstat%3d%253B%253Bincidents_topday%253B%26utm_campaign%3dnews_incidents_topday%26utm_source%3dgazetaru%26utm_medium%3dexchange%26utm_campaign%3dnews%26_openstat%3dgazetaru%3bexchange%3bnews%3b" target="_blank"><img class="x80_80" src="https://api.rnet.plus/Service/TeaserImage?block_id=184&amp;user_id=57a0d5d6-2d15-be8a-4dd5-8d3eca997f7a&amp;teaser_id=293992&amp;flight_id=451&amp;orig_url=https%3a%2f%2fstatic.rnet.plus%2f45%2f94%2f7C%2f80x80_5fb54ebb-9b2d-4868-be6c-983a8011d1f6.jpg"> <div class="partner_material_item_text "><span class="partner_material_item_text_value ">Задавившей в&nbsp;Харькове пятерых человек «мажорке» пригрозили десятью...</span></div><div style="clear: both"></div></a></div> </ul> <div class="cf"></div></div></div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium possimus eum, vel, voluptas saepe quam tempore facilis reiciendis quae perferendis fugiat officiis consequuntur soluta iusto nesciunt sunt voluptatibus quaerat necessitatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium possimus eum, vel, voluptas saepe quam tempore facilis reiciendis quae perferendis fugiat officiis consequuntur soluta iusto nesciunt sunt voluptatibus quaerat necessitatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium possimus eum, vel, voluptas saepe quam tempore facilis reiciendis quae perferendis fugiat officiis consequuntur soluta iusto nesciunt sunt voluptatibus quaerat necessitatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium possimus eum, vel, voluptas saepe quam tempore facilis reiciendis quae perferendis fugiat officiis consequuntur soluta iusto nesciunt sunt voluptatibus quaerat necessitatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium possimus eum, vel, voluptas saepe quam tempore facilis reiciendis quae perferendis fugiat officiis consequuntur soluta iusto nesciunt sunt voluptatibus quaerat necessitatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium possimus eum, vel, voluptas saepe quam tempore facilis reiciendis quae perferendis fugiat officiis consequuntur soluta iusto nesciunt sunt voluptatibus quaerat necessitatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium possimus eum, vel, voluptas saepe quam tempore facilis reiciendis quae perferendis fugiat officiis consequuntur soluta iusto nesciunt sunt voluptatibus quaerat necessitatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium possimus eum, vel, voluptas saepe quam tempore facilis reiciendis quae perferendis fugiat officiis consequuntur soluta iusto nesciunt sunt voluptatibus quaerat necessitatibus.</p>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#Adcenter_Vertical .partner_material_item{
min-height: 45px;
margin: 7px 20px;
}
#Adcenter_Vertical .sausage-header{
position: relative;
display: block;
height: 37px;
margin-left: 20px;
font: bold 21px/38px 'PT Sans', sans-serif;
color: #333;
letter-spacing: 0.01em;
border-bottom: 1px solid #dfdfdf;
}
#Adcenter_Vertical .x80_80{
max-width: 60px;
max-height: 60px;
margin-right: 10px;
float: left;
}
#Adcenter_Vertical .partner_material_item_text{
float:left;
max-width: 175px;
}
#Adcenter_Vertical .partner_material_item_text_value{
font-family: "PT Sans";
font-size: 13px;
line-height: 15px!important;
display: block;
}
#Adcenter_Vertical .partner_material_item_text_value:hover{
color: #b11116;
}
div#Adcenter_Vertical{
float: left;
width: 305px;
margin-bottom: 20px;
margin-right: 20px;
display:none;
}
.AdCentre_new_adv{display:none;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
setTimeout(initNewAdCentreAdv_vertical,0)
function initNewAdCentreAdv_vertical(){
var userId = window.localStorage.getItem("RamblerExchangeUserId");
 
 
tmp_stage=184;
 
if (!userId) {
userId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function (z)
{ var rnd = Math.random() * 16 | 0, v = z == 'x' ? rnd : (rnd & 0x3 | 0x8); return v.toString(16); }
);
window.localStorage.setItem("RamblerExchangeUserId", userId);
}
$.getJSON("https://api.rnet.plus/service/blocks?ids="+tmp_stage+"&user_id=" + userId, function(data)
{
console.dir(data[0].banners)
data=data[0].banners
html=''
html+='<div class="b-white sausage">'
html+='<div class="sausage-header ">'
html+=' Новости Рамблера'
html+='</div>'
html+='<ul class="sausage-list">'
for(i=0;i<data.length; ++i){
name = data[i].title;
link = data[i].url;
img = data[i].logo;
html+='<div class="partner_material_item">'
html+='<a href="'+link+'" target="_blank">'
html+='<img class="x80_80" src="'+img+'"> '
html+='<div class="partner_material_item_text ">'
html+='<span class="partner_material_item_text_value ">'
html+=name;
html+='</span>'
html+='</div>'
html+='<div style="clear: both">'
html+='</div>'
html+='</a>'
html+='</div>'
}
html+=' </ul>'
html+=' <div class="cf"></div>'
html+='</div>'
document.querySelector('#Adcenter_Vertical').innerHTML=''
document.querySelector('#Adcenter_Vertical').innerHTML+=html;
document.querySelector('#Adcenter_Vertical').style.display = 'block';
gaSelector('#Adcenter_Vertical', 'Rambler Vertical ADV', ['Loaded ', 'Viewed', 'Clicked']);
}
);
}

@Vydr · 24.10.2017, 16:53 **[ТС]**

Qwerty_Wasd, если бы я сам верстал каждую страницу, то смог бы вставить div рядом с параграфом. Мне нужен вариант, когда редактор вставляет текст без оглядки на код. Без картинки не обойтись все таки.

Поясню картинку

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

@mrtoxas · 24.10.2017, 17:21

Vydr, решение при помощи скрипта вам интересно? Переезжаем в javascript-ветку? При помощи CSS вы все равно не дождетесь решения, как бы пессимистично это не звучало.

@Vydr · 24.10.2017, 18:00 **[ТС]**

А вот и нет))) Решение найдено. Минимум css и работает везде.

https://codepen.io/atomworks/pen/algcz

Qwerty_Wasd · 24.10.2017, 18:08

Vydr, пфф - под те условия что вы описали, ну никак не подходит. Вот вам вариант тогда еще проще

HTML5
1
2
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque.</p><img src="https://dummyimage.com/200x400/c2c2c2/000000.png"/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo. Perspiciatis quas blanditiis culpa alias suscipit minus unde, magnam quae neque expedita eos cumque.</p>

CSS
1
img{float:right;}

Qwerty_Wasd · 24.10.2017, 18:09

скрин

@Vydr · 24.10.2017, 18:21 **[ТС]**

Как раз этот вариант мне не подходит, а предыдущий - идеально.

Проблема в том, что текст вставляет редактор. И он не может после первого абзаца вставлять код.

Мой код по умолчанию может быть только таким

HTML5
1
2
3
4
<div>Плавающий блок</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, maxime voluptas? Quisquam repellat repudiandae voluptatibus quo.</p>

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

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.10.2017, 14:31
	Гугл не подсказал, и тут вы его не найдете Это даже логически сложно представить. Когда мы задаем элементу абсолютное позиционирование, мы "вырываем" его из общего потока документа, и другие элементы перестают "видеть" этот элемент. 0

@Vydr 0 / 0 / 0 Регистрация: 24.10.2017 Сообщений: 7
	24.10.2017, 14:40 [ТС]
	Я понимаю проблему с css и убиранием абсолютно позиционированного блока из потока. Я прошу помощи: может есть другие варианты решить поставленную задачу? Может есть решение для position:relative, чтоб сместить его вниз и обтекание было с трех сторон блока? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.10.2017, 14:43
	Объясните подробней задачу и приложите картинку макета, чтобы понять то, что вы хотите сделать. 0

@Vydr 0 / 0 / 0 Регистрация: 24.10.2017 Сообщений: 7
	24.10.2017, 15:06 [ТС]
	Вот на этой странице есть блок Новости Рамблера https://www.gazeta.ru/social/2... 3692.shtml На Газете он вставляется перед определенным абзацем. У них это решается, скорее всего, программно, подсчетом абзацев, например. Я хочу попробовать решить методами css. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.10.2017, 15:28
	Не решите. 0

@Vydr 0 / 0 / 0 Регистрация: 24.10.2017 Сообщений: 7
	24.10.2017, 15:42 [ТС]
	Не убивайте мой оптимизм на корню. Вдруг появится гений css и подскажет простейшее решение 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.10.2017, 15:47
	Vydr, да, конечно, я лишь высказал свое мнение. 0

@Vydr 0 / 0 / 0 Регистрация: 24.10.2017 Сообщений: 7
	24.10.2017, 16:53 [ТС]
	Qwerty_Wasd, если бы я сам верстал каждую страницу, то смог бы вставить div рядом с параграфом. Мне нужен вариант, когда редактор вставляет текст без оглядки на код. Без картинки не обойтись все таки. Поясню картинку Есть два абзаца текста и черный прямоугольник. Текст должен обтекать прямоугольник с трех сторон. Отступ от верха блока с текстом я определил, допустим, в 200px. Миниатюры 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.10.2017, 17:21
	Vydr, решение при помощи скрипта вам интересно? Переезжаем в javascript-ветку? При помощи CSS вы все равно не дождетесь решения, как бы пессимистично это не звучало. 0

@Vydr 0 / 0 / 0 Регистрация: 24.10.2017 Сообщений: 7
	24.10.2017, 18:00 [ТС]
	А вот и нет))) Решение найдено. Минимум css и работает везде. https://codepen.io/atomworks/pen/algcz 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	24.10.2017, 18:09
	скрин Миниатюры 0