使用div float＆amp;保证金属性

Question

我正在尝试将广告放入我的博客文章＆amp;我希望我的数据能够包装广告。我正在使用以下代码来实现这一目标。

实施例。期望的输出。

。

<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/>。

感谢。

Answer 1

你可以试试这个：

<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/

Answer 2

“clear”属性可以阻止任何与其所在元素位于同一Y位置的浮动。

查看Sandbag Float Pusher以及css-lab.com上的其他沙袋。它在同一侧使用一个薄的虚拟浮动器将“广告”向下推到您想要的位置。 “广告”具有“清晰”设置。此技术允许您根据需要无需修改即可流式传输内容。

Google css sandbag了解更多技巧。

Answer 3

您可以使用JavaScript将广告放入帖子中，例如，使用jQuery尤其容易。 您唯一需要弄清楚的是如何为您的广告找到一个好位置，即在代码中实际插入它们的位置。