使用 div float &保证金属性

发布于 2024-12-15 17:28:32 字数 774 浏览 0 评论 0原文

我正在尝试将广告放入我的博文中我希望我的数据环绕广告。我正在使用以下代码来实现这一点。

前任。所需的输出。

.在此处输入图像描述

<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 粘在底部,右侧不显示任何数据。 除了 Floatmargin 之外,是否还有任何属性需要添加。

编辑: 是获取每个博主帖子内容的标签。所以帖子的数据会自动出现。必须将此代码添加到模板中,以便它适用于每个帖子。我无法在每个帖子中对 Div 标签进行硬编码,因此我需要一些方法来在我的帖子周围排列广告。

我可以将具有指定属性的 div 放在 标记的开头或结尾。

谢谢。

I am trying put ads inside my blogger post & i want my data to wrap around the ads.I am using following code to make this happen.

Ex. Desired output.

.enter image description here

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

But i am not able to wrap the text around it & Second div sticks to the bottom without showing any data on the right side.
Is there any property which is left to be added apart from Float and margin.

EDIT: <data:post.body/> is the tag which fetches every blogger post content. so the data for the post come automatically. This code has to be added in the template so that it works for every post. I can't hard code the Div tags inside every post so i need some method to arrange ads around my post.

I can put the divs with the specified properties at the starting or ending of the <data:post.body/> tag.

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

绝對不後悔。 2024-12-22 17:28:32

您可以尝试以下操作:

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

You can try this :

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

Preview : http://jsfiddle.net/Gs2kD/

初与友歌 2024-12-22 17:28:32

您可以使用 JavaScript 将广告放入帖子中,例如使用 jQuery 特别容易。
您唯一需要弄清楚的是如何为广告找到合适的位置,即在代码中实际插入广告的位置。

You can put the ads inside the post with JavaScript, especially easy with jQuery for example.
The only thing you have to figure out, is how to find a good location for you ads, i.e. where to actually insert them in the code.

放低过去 2024-12-22 17:28:32

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

查看 Sandbag Float Pusher 以及 css-lab.com。它在同一侧使用一个薄的虚拟浮动器将“广告”向下推到您想要的位置。 “广告”已设置为“清除”。此技术允许您根据需要在不进行修改的情况下流入内容。

谷歌搜索 css sandbag 了解更多技术。

The "clear" attribute can prevent any floaters at the same Y position as the element that it's on.

Check out Sandbag Float Pusher, and the other sandbags on css-lab.com. It uses a thin dummy floater on the same side to push the "ad" down to where you want it. The "ad" has "clear" set. This technique allows you to flow the content in without modification, as you require.

Google for css sandbag for more techniques.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文