div的流体间距答案

【问题标题】：Fluid Spacing for a divdiv的流体间距
【发布时间】：2012-05-24 10:17:33
【问题描述】：

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

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

style="左：-110px；上：-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，我想知道它是否能解决我的问题，但似乎无法正常工作。这是我尝试过的代码（注：我目前使用的是上面的，下面的代码是我尝试过的）：

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>

【问题讨论】：

链接到您的示例或 jsbin.com 的位置在哪里？
@Vishal - 链接在那里，我发布时没有添加链接，但我已修复它。对不起 =>

标签： javascript jquery css jquery-ui addthis

【解决方案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>

【讨论】：

你能举个例子吗？ Javascript 不是我的强项。

【解决方案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>

【讨论】：