Fluid Spacing for a 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?

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;" /* 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; 
}

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

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.

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

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>

回答1:

You could add some JavaScript to the image tag like this:

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

and then elsewhere in your document place:

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

回答2:

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>

来源：https://stackoverflow.com/questions/10691304/fluid-spacing-for-a-div

标签

javascript

jquery

css

jquery-ui

addthis