流体间距 [英] Fluid Spacing for a div

问题描述

我有一个包含主图片的网页。主图像将根据照片更改其高度和宽度。我还有一个AddThis共享窗口小部件在图像旁边。我有一个大小的图像的正确的间距。如何设置AddThis div 以根据图像大小流动保持其当前间距？

I have a page that features a main image. The main image will change its height and width depending on the photo. I also have an AddThis sharing widget next to the image. I have the spacing correct for one size image. How do I set the AddThis div to fluidly maintain its current spacing depending on the image size?

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

Here is a link so you can see an example of what I am speaking about. The black box (outlined in white) on the page represents an image that will change. The AddThis div currently adjust for the height but not the width. Here is the CSS for the AddThis div:

style =left：-110px; top：-220px; / *它当前的位置，我喜欢当前的间距。它必须保持此间距* /

style="left: -110px; top:-220px;" /* How it is currently positioned and I like the current spacing. It must maintain this spacing */

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

如何更改它，AddThis正确调整其间距到图像高度？

How do I change this so AddThis correctly adjust its spacing to the image height and width?

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

Another way I thought of doing this is using jQuery to read the image height and width then set the left and top elements of the AddThis div based on image size. This would need to be calculated dynamically.

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

I will use whatever method works the best. Please provide an example as javascript is not my strong suit.

更新： 我读取另一个问题和

UPDATE: I read another question and read an answer provided and I am wondering if it will solve my issue but does not seem to be working correctly. Here is the code have tried (Note: What I am currently using is above, the below code is what I have tried):

JS

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

HTML

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>

推荐答案

这是我如何做到这一点，不再在页面的中心。正在处理那个...

Here is how I have done this but my image is no longer centered on the page. Working on that one...

<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>

这篇关于流体间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！