我一直在使用this JavaScript image annotation plugin向元素添加注释 - 我设法让它在一个空白网页上正常工作,只有这个 HTML:
<div id="sample-image">
<img src="img.jpg"></img>
</div>
还有这个用于注释的 CSS:
.circle {
border-radius: 50%/50%;
width: 20px;
height: 20px;
background: black;
}
这会产生正确的结果...
但是当我使用 Twitter 的 Boostrap 和这个 HTML 将它添加到另一个元素时
<div class="container-fluid">
<div class="row-fluid">
<div data-spy="affix" data-offset-top="200" class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div style="float:right" class="span9">
<div id="sample-image">
<img src="img.jpg"></img>
</div>
</div>
...
元素定位到页面顶部,因为默认情况下它们具有 position:aboslute 属性,如下所示:
<a class="circle" data-toggle="tooltip" data-placement="top" data-original-title="Church" rel="tooltip" onmouseover="$(this).tooltip('show')" style="left: 406px; top: 247px; position: absolute;"></a>
将其更改为 position: relative 会使它们正确放置,但根据 Chrome,它们的大小设置为 0px x 0px,因此它们不会显示。
知道为什么会这样吗?
谢谢, jack
最佳答案
float 有时会导致包含的对象折叠。您是否尝试过使用“display: inline-block”来代替? http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
关于html - 为什么这个元素在使用 'relative' 定位时将其大小设置为 0px x 0px?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15412473/