Question

我有一个以主图像为特色的页面。主图像将根据照片改变其高度和宽度。我还在图像旁边有一个AddThis共享小部件。我的间距对于一个尺寸的图像是正确的。如何设置AddThis div以根据图像大小流畅地保持其当前间距？

Here is a link所以你可以看到我所说的一个例子。页面上的黑框（白色轮廓）表示将更改的图像。 AddThis div目前调整高度而不是宽度。这是AddThis div的CSS：

style =“left：-110px; top：-220px;” / *当前如何定位，我喜欢当前的间距。它必须保持这个间距* /

.addthis_floating_style{ 
        background: none repeat scroll 0 0 #000000 !important; 
        position: relative !important; 
}

如何更改此设置，以便AddThis正确调整其间距为图像的高度和宽度？

我想到的另一种方法是使用jQuery读取图像的高度和宽度，然后根据图像大小设置AddThis div的left和top元素。这需要动态计算。

我将使用最好的方法。请提供一个例子，因为javascript不是我的强项。

更新： 我提供了read another question和read an answer，我想知道它是否会解决我的问题，但似乎无法正常工作。这是代码尝试过的（注意：我目前使用的是上面的代码，下面的代码是我尝试过的）：

JS

var $j = jQuery.noConflict();
$j("#add-this-vertical").position({
    my:        "right top",
    at:        "right bottom",
    of:        $j("#image-container"),
   collision: "fit"
})

HTML

<div id="image-container">
<div class="img-center"><img src="/test.jpg" alt="test" />
</div>
<div id="add-this-vertical">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/
 300/addthis_widget.js">   
</script>
<!-- AddThis Button END -->
</div>


</div>

Answer 1

您可以在图像标记中添加一些JavaScript，如下所示：

<img onload="onMyImageLoad(this)" />

然后在您的文档中的其他地方：

<script>

function onMyImageLoad( img )
{

var height = img.height

// now do something with this height value like change a 
// div's height or margin-top    

}

</script>

Answer 2

以下是我完成此操作的方法，但我的图片不再以页面为中心。在那个工作......

<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
    <div style="text-align:center;">
         <img src="/Images/test.jpg" alt="test" />
    </div>
    <div style="position:absolute; bottom:0px; right:-40px;">
    <div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
         <a class="addthis_button_facebook"></a>
         <a class="addthis_button_twitter"></a>
         <a class="addthis_button_email"></a>
         <a class="addthis_button_compact"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/
            addthis_widget.js"></script>
 </div>
    </div>

div的流体间距

2 个答案: