Использование свойств div float и margin

Я пытаюсь поместить рекламу в свой пост в блоггере и хочу, чтобы мои данные обтекали рекламу. Я использую следующий код, чтобы это произошло.

Бывший. Желаемый результат.

.введите здесь описание изображения

<div style='float:right;margin:50px 0px 0px 0px;'>
<!-- AD1 Code -->
</div>


<data:post.body/>

<div style='float:left;margin:0px 0px 50px 0px;'>
<!-- AD2 Code -->
</div>

Но я не могу обернуть текст вокруг него, а второй div прилипает к нижней части, не отображая никаких данных с правой стороны. Осталось добавить какое-либо свойство, кроме Float и margin.

РЕДАКТИРОВАТЬ: <data:post.body/> – это тег, который извлекает содержимое каждой публикации блоггера. поэтому данные для поста приходят автоматически. Этот код нужно добавить в шаблон, чтобы он работал для каждого поста. Я не могу жестко кодировать теги Div внутри каждого поста, поэтому мне нужен какой-то метод для размещения рекламы вокруг моего поста.

Я могу поместить div с указанными свойствами в начале или конце тега <data:post.body/>.

Спасибо.


html css blogger css-float
person Sangram Nandkhile    schedule 15.11.2011    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Вы можете попробовать это:

<div style="text-align:justify">

<div
style="float:right;margin:5px;border:2px solid red;height:100px;width:100px">
    Ad 1
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis 
ultrices felis, sed faucibus elit sollicitudin eu. Pellentesque habitant 
morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Etiam id mi a elit luctus tristique. Curabitur pharetra magna ac nisi 
accumsan a consequat magna placerat. Aliquam erat volutpat. Integer id 
felis ante, et malesuada leo. Duis scelerisque vulputate lorem, at 
cursus eros rutrum pulvinar.

Nunc tempus ultricies varius. Suspendisse interdum imperdiet enim, quis 
aliquam sapien pulvinar in. Morbi vulputate euismod elit, ut ultricies 
lectus dignissim at. Venenatis ullamcorper purus at consequat. Integer 
ultricies, quam vitae fringilla venenatis, urna felis tincidunt turpis, 
quis volutpat nisi felis tincidunt turpis. Proin at metus sit amet augue 
convallis laoreet. Etiam viverra mollis ornare. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; Pellentesque libero lectus, laoreet quis consectetur sit 
amet, laoreet vel. Suspendisse commodo fringilla facilisis. Nam viverra 
laoreet lorem, at molestie vestibulum non.

<div
style="float:left;margin:5px;border:2px solid red;height:100px;width:100px">
  Ad 2
</div>

Etiam ut nulla justo. Quisque dignissim ultrices faucibus. Maecenas volutpat, 
eros nec rutrum eleifend, enim dolor gravida nulla, quis vestibulum neque 
dolor vel purus. Etiam imperdiet mollis magna, eget interdum eros tincidunt 
quis. 
Sed a ligula metus, ac ornare elit. Cum sociis natoque penatibus et magnis dis 
parturient montes, nascetur ridiculus mus. Suspendisse sit amet lacus felis. 
Phasellus ultrices facilisis interdum. Morbi dapibus turpis a nisl mollis in 
hendrerit quam luctus. Cras eleifend mauris eu lectus viverra ullamcorper. 
In sed erat et lacus dapibus fermentum. Donec bibendum, eros ac convallis 
fermentum, dolor justo tincidunt risus, vitae lacinia lorem risus eu ipsum. 
Morbi fringilla ante ut ipsum blandit vehicula.
</div>

Предварительный просмотр: http://jsfiddle.net/Gs2kD/

person lepix    schedule 15.11.2011
comment
эй спасибо. Но это своего рода жесткий код для любого конкретного сообщения с данными. Я отредактировал вопрос. вы можете взглянуть на это сейчас? - person Sangram Nandkhile; 15.11.2011
comment
Отличный ответ на исходный вопрос. - person Chris Cudmore; 15.11.2011

arrow_upward
1
arrow_downward

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

Ознакомьтесь с поплавковым толкателем мешков с песком и другими мешками с песком на css-lab.com. Он использует тонкий фиктивный поплавок на той же стороне, чтобы протолкнуть «рекламу» туда, где вы хотите. «Объявление» имеет «четкий» набор. Этот метод позволяет вам вводить контент без изменений, как вам нужно.

Google для css sandbag для большего количества методов.

person Ed Staub    schedule 15.11.2011
comment
@Code Бегемот - если это не подходит для того, что вам нужно, мне было бы интересно услышать, как это не подходит. - person Ed Staub; 19.11.2011
comment
Дайте мне попробовать это, тогда я могу сказать вам, подходит это или нет. Кстати, вы можете предоставить CSS или стиль для <div> - person Sangram Nandkhile; 23.11.2011
comment
@Code Hippo - посмотрите на источник примера поплавкового толкателя из мешков с песком. Это очень просто - он предназначен для демонстрации именно того, что вам нужно, AFAICT. Я не чувствую себя комфортно, просто копируя это здесь, и мне действительно нечего добавить. - person Ed Staub; 23.11.2011

arrow_upward
0
arrow_downward

Вы можете размещать рекламу внутри сообщения с помощью JavaScript, особенно легко, например, с помощью jQuery. Единственное, что вам нужно выяснить, это как найти хорошее место для ваших объявлений, то есть куда их вставлять в код.

person margusholland    schedule 15.11.2011
comment
Можете ли вы показать мне, как я могу сделать это с помощью AdSense ... я много искал, но я не получил подходящего руководства по размещению рекламы с помощью jquery ... - person Sangram Nandkhile; 15.11.2011
comment
Я не знаю точную разметку поста блогера, поэтому не могу дать вам код. - person margusholland; 15.11.2011