Помогите с CSS - Форум успешных вебмастеров

Dumpty · 12.02.2015, 15:35

Привет знатокам ЦСС. Возник тут наверное нубский вопрос, но все же....

Идет текст вида:
<p>xxx</p>
<p>xxx2</p>
<p>xxx3</p>

Между ними я вставляю див с баннером, т.е. чтото типа:
<p>xxx</p>
<p>xxx2</p>
<div>banner</div>
<p>xxx3</p>

Проблема в том, что див с баннером разрывает текст. Т.е. если высота баннера 1000 пикселей, а ширина 100 (к примеру), то получается большая дырка между текстом xx2 и xx3.

Вобщем задача проста казалось бы, как сделать чтобы вставляемый div с баннером обтекался текстом?

jarosek · 12.02.2015, 15:38

<div style="margin-top:-10px;margin-bottom:-10px;">banner</div>
пиксели подгоняешь пока тебя не устроит

~~cs2ms~~ · 12.02.2015, 15:39

p,div{display:inline;margin:0}

Dumpty · 12.02.2015, 15:48

Цитата:

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

<div style="margin-top:-10px;margin-bottom:-10px;">banner</div>
пиксели подгоняешь пока тебя не устроит

Чтото оно тянет текст под баннер (див), но не обтекает его

Цитата:

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

p,div{display:inline;margin:0}

вообще никакого эффекта

П.С. сейчас выглядит так:

<p>xxx</p>
<p>xxx2</p>
<div>banner</div>
<p>xxx3</p>
<p>xxx4</p>
<p>xxx5</p>
<p>xxx6</p>
...

Надо:
<p>xxx</p>
<p>xxx2</p>
<div>banner</div><p>xxx3</p>...<p>xxx5</p> (сколько там влезет на длину баннера)
<p>xxx6</p> и дальнейший текст если есть...

jarosek · 12.02.2015, 15:54

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

Euphoria · 12.02.2015, 15:55

попробуй задай диву ширину и высоту под баннер:
width: px;
height: px;

Dumpty · 12.02.2015, 16:05

<div style="float:left;margin:6px 50px 2px 2px;">

вот так сработало, т.е. флоат надо было задать

всем спасибо

~~cs2ms~~ · 12.02.2015, 19:03

Цитата:

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

вообще никакого эффекта

да ну, ты чё с браузером сделал

вот этот код ставит блоки в линию без всяких

Цитата:

большая дырка

PHP код:


			
<!DOCTYPE html>

<html>

<head>

<style>p,div{display:inline;margin:0}</style>

</head>

<body>

<p>block 1</p>

<div>block div</div>

<p>block 2</p>

</body>

</html>