为什么当使用'relative'定位时,这个元素的大小设置为0px x 0px?

时间:2013-03-14 14:46:51

标签: html css

我一直在使用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;
    }

这会产生正确的结果......

example showing correct positioning

然而,当我使用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>
...

元素位于页面顶部,因为默认情况下它们具有位置: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>

将此更改为位置:相对会导致它们被正确放置,但根据Chrome,它们的大小设置为0px x 0px,因此不会显示它们。

为什么会出现这种情况?

谢谢, 杰克

1 个答案:

答案 0 :(得分:0)

float有时会导致包含对象崩溃。您是否尝试过使用&#34; display:inline-block&#34;代替? http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/