将基于文本的 div 放置在圆内的相对位置

发布于 2024-10-09 18:59:02 字数 429 浏览 0 评论 0原文

直接问题 - 我如何将某些对象或小文本放置在某个区域内。例如，我如何用 html/javascript 替换下面的图像。

--- 我没有足够的代表来发布图片 :/ 但请尝试此 URL - https:// i.sstatic.net/a3eWL.jpg

大图 - 我正在尝试为 Google 地球创建一个 kml 文件，当单击该点时，会弹出气球描述窗口，我可以显示 html 格式的图表，显示其中的位置卫星就在那一刻。 Google Earth 和 KML 文档允许其中几乎任何 html 格式，因此目前正在寻找一种好方法来做到这一点。

免责声明：我已经有几年没有做过任何 html 或 javascript 编辑了，所以一般的例子和见解是非常好的。

谢谢

原文

分享到QQ

分享到微博

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

发布评论

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

骑趴 2024-10-16 18:59:02

您可以创建一些绝对定位的

，并使用它们的 top 和 left CSS 属性来移动它们。

这里有一个简单的例子： http://jsfiddle.net/94Kzt/ （注意：我使用 JQuery 来做到这一点很快，但是很容易修改它以使用标准 JS DOM 操作调用）

回复收藏 0 原文

残花月 2024-10-16 18:59:02

基本上以下部分就是我所做的。

<div style="display: block; position: relative; width: 300px; height: 300px; border: 1px solid black; background: gray;">
    <div style="position:absolute; width: 296px;height: 296px;background-color: transparent;border: 2px #a72525 solid;   -webkit-border-radius: 148px;   border-radius: 148px;"></div>
    <div style="position:absolute; width: 148px;height: 148px;top: 72px;left: 72px;background-color: transparent;border: 2px #a72525 solid; -webkit-border-radius: 75px;border-radius: 75px;"></div>  
    <div style="position:absolute;  width: 4px;   height: 4px;top:148px;    left:148px;    background-color: black;"></div>  
    <div style="position: absolute; font-size: 0.8em; color: #222222; top: %dpx; left: %dpx;">%d</div>    
</div>

最后一个 div 是放置在任意位置的标签。 %d 是整数值（来自我的 python 代码）

此外，这里是工作示例。给nico的道具
http://jsfiddle.net/94Kzt/72/

Essentially the below section is what I did.

<div style="display: block; position: relative; width: 300px; height: 300px; border: 1px solid black; background: gray;">
    <div style="position:absolute; width: 296px;height: 296px;background-color: transparent;border: 2px #a72525 solid;   -webkit-border-radius: 148px;   border-radius: 148px;"></div>
    <div style="position:absolute; width: 148px;height: 148px;top: 72px;left: 72px;background-color: transparent;border: 2px #a72525 solid; -webkit-border-radius: 75px;border-radius: 75px;"></div>  
    <div style="position:absolute;  width: 4px;   height: 4px;top:148px;    left:148px;    background-color: black;"></div>  
    <div style="position: absolute; font-size: 0.8em; color: #222222; top: %dpx; left: %dpx;">%d</div>    
</div>

The last div are the labels that are placed wherever. The %d are integer values (from my python code)

In addition, here is the working example. Props to nico
http://jsfiddle.net/94Kzt/72/

回复收藏 0 原文

~没有更多了~