4

この JavaScript 画像注釈プラグインを使用してプロジェクトに注釈を追加しました。この HTML だけを使用して、空白の Web ページで正しく機能させることができました。

<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 に設定されているため、表示されません。

なぜこれが考えられるのでしょうか？

ありがとう、ジェイク

4

1 に答える 1

0

float は、含まれているオブジェクトを折りたたむことがあります。代わりに「display: inline-block」を使用してみましたか? http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

于 2013-03-14T14:53:57.280 に答える